Question

我有一个表格，每行包含一个复选框。在表格标题中，我有一个ID_NUMBER STATUS DATE1 DATE2 DATE3 DATE4 DATE5 DATE6 THE_DATE ---------- ------ -------- -------- -------- -------- -------- -------- --------------------------------------------------------------------------- 1 TRUE 20-08-17 19-08-17 20-08-17 19-08-17 22-08-17 18-08-17 Date2 19-08-17 Date4 19-08-17 Date6 18-08-17复选框，可以切换所有表格行框。

我正在尝试实现一些逻辑，如果复选框的数量超过特定限制，则显示错误并且不要切换表格行复选框或Check All框本身。< / p>

即使我正在返回checkall，也存在允许检查checkAll框的问题。我的绑定问题？

HTML：

false

组件：

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

虽然没有选中任何表行复选框，并且错误显示正确，但我点击的框仍然会被切换。

我认为toggleAllEmployees(flag) { const temp = []; if (flag) { // If selecting all of these passes the max, throw an error if (this.importResults.length > this.maxSelection) { /* This is where I get to when I display the error message */ alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.'); return false; } else { for (let i = 0; i < this.importResults.length; i++) { if (this.importResults[i].OnTempAssignment !== 'True') { this.importResults[i].checked = true; temp.push(this.importResults[i]); } } this.employeeSelection = temp; // Emit our changes this.selectedEmployees.emit(this.employeeSelection); } } else { //The else statement just un-checks all the boxes. } }会阻止它，但我猜不是。我的绑定是否有问题，无论如何都可以切换它？

Answer 1

当绑定到复选框的值发生更改时，

ngModelChange会被触发，因此停止切换操作的时间已晚。

在这里你应该与click事件绑定。然后，您可以使用$event.preventDefault()来停止切换复选框。

您可以在$event.preventDefault()之前添加一些逻辑来确定是否应该阻止复选框更改状态。

请参阅 Plunker demo 。

Answer 2

HTML

 <input type="checkbox" [checked]="isChecked" (click)="onClick($event)">

代码

onClick(e){
  e.preventDefault();

 // In my case, I'm using the popup.
 // so once user confirms then hits api and update checkbox value.
 this.isChecked = true;
}

Angular2 - 防止检查复选框

2 个答案: