javascript - 在表中如何使用角度 9 中的按钮启用和禁用引导复选框?
问题描述
我正在开发一个有角度的页面。我对角度不太熟悉。我花了几个小时来解决这个问题,并经历了关于这个问题的最大数量的备用线程。但找不到我正在研究的解决方案。
具体来说,我想在这里强调我正在使用引导复选框。我没有使用 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>
<div class="row paginator">
<div class="col-md-7">
<p> Showing {{ ((p - 1) * pageSize) + 1 }} to {{ pageSize * p }} of {{collectionsize }} </p>
</div>
<div class="col-md-5">
<pagination-controls (pageChange)="p = $event" ></pagination-controls>
</div>
</div>
<div class="container" style="padding-top: 30px;">
<div class="w3-show-inline-block">
<div class="w3-bar">
<button type="submit" id="allobook" class="btn btn-success" [disabled]="true" (click)="allowClick()" style="margin-right: 105px;float: right;">Allow</button>
<button type="submit" id= "rejectbook" class="btn btn-danger" [disabled]="true" (click)="rejectClick()" style="float: right;margin-right: 35px;">Reject</button>
</div>
</div>
</div>
我的页面.ts
export class MyPageComponent implements OnInit {
page = 1;
pageSize = 10;
p: number = 1;
collectionsize:any;
count: boolean;
bookslistdata:bookslist[];
constructor (private bookslist: BookService) { }
ngOnInit(): void {
this.bookslist.GetBooksData().subscribe(data=>{
this.bookslistdata = data;
this.collectionsize = data.length;
})
}
allowClick(){
alert('approve');
}
rejectClick(){
alert('reject');
}
我能够禁用页面加载上的按钮。但是当我尝试使用复选框时,我无法实现。我想知道我怎样才能实现?
解决方案
当页面加载时,按钮应该被禁用,直到我点击复选框。
<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
关于代码解决了我禁用 ng 的问题。
推荐阅读
- jenkins - 如何通过 SSH 将 Jenkins 的构建状态发布到 .net 项目的 Bit 存储桶
- docker - 使用 Dockerfile 构建 Docker 映像时没有路由到主机错误
- mysql - AWS Lambda/API Gateway - 传递一个 ID 以使用 node.js 删除 mysql 中的一行
- python - 如何用字符串替换lxml中的元素
- powershell - 所有已过滤用户对所有邮箱的权限 - Exchange 2010
- javascript - 更改 .x 属性没有任何作用,但 .body.property 有效
- asp.net-mvc - 绝对路径rotativa asp net core
- angularjs - 删除引导日期时间选择器中的关键问题
- rest - java.lang.AssertionError: 预期 [201] 但发现 [201]
- angular - 从服务中获取地图操作员