需要在选中后立即取消选中复选框。角 4答案

【问题标题】：need to un-check a checkbox as soon as it is checked. Angular 4需要在选中后立即取消选中复选框。角 4
【发布时间】：2017-11-07 06:02:37
【问题描述】：

我有一个对象数组，其布尔属性绑定到复选框

plunkr https://plnkr.co/edit/j25nOhYm1MNeJzUJzBBs

 this.data =  [{ "name":"Ford", "selected":false},
    { "name":"BMW","selected":false },
    { "name":"Fiat","selected":false }
]

在 html 中我尝试了 ngModel 和 ngModelChange

  <li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox"  
    (ngModelChange)="select(item)" [(ngModel)]="item.selected">
   {{ item.name}}
  </li>

我也试过[checked]和（change）

  <li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox"  
    (change)="select(item)" [checked]="item.selected">
   {{ item.name}}
  </li>

也试过

<div>
<li *ngFor="let item of data;">
    <input class="checkbox binning-checkbox" type="checkbox" (change)="select(item)" [(ngModel)]="item.selected"> {{ item.name}}
</li>

更新了 plunkr 但事件代码

 public select(item){
alert(item.selected );
item.selected = false;  }

无法“取消选择”复选框

【问题讨论】：

选中复选框后立即取消选中它有什么意义？你能给出一个用例吗？
在选中最大复选框时，我想取消选中的最后一个。。
感觉就是当检查的最大数量达到时你想让所有其他人禁用
item.selected 在你的例子中总是假的......不管你是否选择了一个项目。
是的，如果您看到 plunkr，这就是一个示例中发生的情况。

标签： javascript angular

【解决方案1】：

您可以使用 setTimeout 来“破解”它，这将在稍后将复选框设置为 false :)

public select(item){
  setTimeout(() => {
    item.selected = false;
  })
}

在您的示例演示中，我使用了ngModel 和ngModelChange 版本：https://plnkr.co/edit/53Tb6wiXYAlat52VPuwG?p=preview

【讨论】：

【解决方案2】：

保持选中状态不需要改变对象，将数组改为

this.data =  ["Ford","BMW","Fiat"]

<ul>
  <li *ngFor="let item of data">
    <label>
      <input type="checkbox"
        ng-model="xyx"
        ng-click="toggleItem(item)"
        ng-checked="selectedItems.indexOf(item) > -1"
        ng-required="selectedItems.length == 0" /> 
        {{item}}</label>
  </li>                  
</ul>

toggleItem(item){
    var index = this.selectedItems.indexOf(item);
    if(index == -1) {
      this.selectedItems.push(animal);
    }
    else{
      this.selectedItems.splice(index, 1);
    }
}

查看工作中的demo here

【讨论】：

【解决方案3】：

解决方案是使用带有更改事件和点击事件的 ngModel

[(ngModel)]="item.selected" (change)="select(dataItem,$event)" (click)="checkExceed($event,dataItem)"

当总尝试次数大于 x 时，点击时我只需使用

$event.preventDefault();

【讨论】：