代码之家 › 专栏 › 技术社区 › SBB

Angular2-防止选中复选框

angular2-ngmodel typescript angular javascript

SBB · 技术社区 · 7 年前

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

checkall 盒子本身。

checkAll 框进行检查,即使我正在返回 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.
    }
}

我假设 return false; 本来可以阻止的,但我想不会。我的绑定允许进行切换,这有什么问题吗?

3 回复 | 直到 7 年前

Pengyy 7 年前

ngModelChange 当绑定到复选框的值更改时激发,则停止切换操作为时已晚。

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

$事件。preventDefault() 确定是否应阻止复选框更改状态。

Plunker demo .

Bharat chaudhari 4 年前

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

Bashir Saidi Wamula 2 年前

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

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

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

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

      }

    }
  }

所以你可以根据我的情况设定你的限制