Angular2 - 防止复选框被选中答案

【问题标题】：Angular2 - Prevent Checkbox from being checkedAngular2 - 防止复选框被选中
【发布时间】：2017-08-17 04:43:42
【问题描述】：

我有一个表，每行包含一个复选框。在表格标题中，我有一个Check All 复选框，用于切换所有表格行框。

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

有一个问题是允许选中 checkAll 框，即使我返回 false。我的绑定有问题？

HTML：

<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.
    }
}

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

我认为return false; 会阻止这种情况，但我想不会。我的绑定是否有问题导致它无论如何都可以切换？

【问题讨论】：

你试过了吗event.preventDefault();
@AravindI 做了，但也没有用。 $event 只是发送 true/false 布尔值，而不是实际的事件对象。
你也可以使用pointer events css

标签： javascript angular typescript angular2-ngmodel

【解决方案1】：

ngModelChange 在绑定到复选框的值发生更改时触发，停止切换操作为时已晚。

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

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

见Plunker demo。

【讨论】：

【解决方案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;
}

【讨论】：

谢谢，这是最简单的解决方案。

【解决方案3】：

我遇到了类似的问题，但检查是否已达到限制，然后阻止默认的 preventDefault() 并停止 stopPropagation()

<input type="checkbox" class="message-checkbox mr-2" (click)="stopCheckingStates($event)"
                        (change)="stateChange(state, $event)" [checked]="isStateChecked(state.id)">

然后在ts文件中

    stopCheckingStates(event){
    this.stopCheckingCheckBox(event, 1);
  }

  stopCheckingCheckBox = (event, limit) => {
    if (selectArray.length > limit) {
      if (event.target.checked) {
        event.preventDefault();
        event.stopPropagation();
      } else {

      }

    }
  }

所以你可以根据我的情况设置你的限制，它是一个

【讨论】：