在表中如何使用角度 9 中的按钮启用和禁用 Bootstrap 复选框？

Question

我正在开发一个有角度的页面。我对角度不太熟悉。我花了几个小时来研究它，并浏览了有关此问题的最大数量的备用线程。但找不到我正在研究的解决方案。

具体来说，我想在这里强调我正在使用引导复选框。我没有使用 ng-bootstrap。

以下是我想解决的问题。

1. 当页面加载时，按钮应该被禁用，直到我单击复选框。

2. 当我单击表标题中的复选框时，它应该启用表中的所有复选框并启用按钮。

3. 当我取消选中标题中的复选框时，它应该禁用所有其他复选框并禁用按钮。

以下是我为解决问题所做的详细信息。

我的页面.html

   <div id='bookstore'>

            <table  class="table table-responsive table-striped">

                <thead class="th-color">

                    <tr>

                        <th><input name="select_all_books" type="checkbox" ></th>

                        <th class="theading">Book ID</th>

                        <th class="theading">Book Name</th>

                        <th class="theading">From Date</th>

                        <th class="theading">To Date</th>

                        <th class="theading">No of Days</th>

                        <th class="theading">Apply Date</th>

                        <th class="theading">Reason</th>

                        <th class="theading">Book Status</th>

                       

                    </tr>

                </thead>

                <tbody>

                    <tr *ngFor="let data of bookstore | paginate: { itemsPerPage: pageSize, currentPage: p}">

                        <td><input type="checkbox" id="rowcheckedbookstore"></td>

                        <td> {{data.BookId }}</td>

                        <td>{{ data.BookName }}</td>

                        <td>{{ data.BookStart | date:'dd-MM-yyyy' }}</td>

                        <td>{{ data.BookReturn  | date:'dd-MM-yyyy' }}</td>

                        <td>{{ data.BookDays }}</td>

                        <td>{{ data.ApplyDate}}</td>

                        <td>{{ data.Reason }}</td>

                        <td>{{ data.BookStatus}}</td>                 

                    </tr>

                </tbody>

                </table>

                </div>

我可以禁用页面加载上的按钮。但当我尝试使用复选框时，我无法实现。我想知道我怎样才能实现？

Answer 1

当页面加载时，按钮应该被禁用，直到我单击复选框。<input&nbsp;disabled&nbsp;ng-disabled="name&nbsp;==&nbsp;''&nbsp;||&nbsp;password&nbsp;==&nbsp;''"&nbsp;type="submit"&nbsp;value="Log&nbsp;in"&nbsp;/>about 代码解决了我禁用 ng 的问题。