为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只甜甜圈 2023-10-14 15:45:02
我正在开发一个有角度的页面。我对角度不太熟悉。我花了几个小时来研究它,并浏览了有关此问题的最大数量的备用线程。但找不到我正在研究的解决方案。具体来说,我想在这里强调我正在使用引导复选框。我没有使用 ng-bootstrap。以下是我想解决的问题。当页面加载时,按钮应该被禁用,直到我单击复选框。当我单击表标题中的复选框时,它应该启用表中的所有复选框并启用按钮。当我取消选中标题中的复选框时,它应该禁用所有其他复选框并禁用按钮。以下是我为解决问题所做的详细信息。我的页面.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>我可以禁用页面加载上的按钮。但当我尝试使用复选框时,我无法实现。我想知道我怎样才能实现?
查看完整描述

1 回答

?
森栏

TA贡献1810条经验 获得超5个赞

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

<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />

about 代码解决了我禁用 ng 的问题。


查看完整回答
反对 回复 2023-10-14
  • 1 回答
  • 0 关注
  • 68 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信