Angular 2中[attr.disabled]不符合预期：全部复选框被禁用问题

嘿，我仔细看了你的代码，马上就发现问题所在了——你用了一个全局的disabled变量来控制所有复选框的状态，这才导致不管条目是什么状态，所有复选框都被禁用（或者全部启用）。

问题根源分析 #

你在组件里声明的private disabled: boolean是一个全局变量，当你循环遍历items数组时，每一次循环都会覆盖这个变量的值。比如：

• 如果最后一个遍历到的item符合Status.required的条件，this.disabled会被设为true，那所有复选框都会用这个最终值，全部变成禁用状态；
• 哪怕前面的item都把disabled设为false，只要最后一个item把它改成true，所有复选框都会跟着禁用。

显然你想要的是每个条目独立控制自己的复选框禁用状态，而不是所有复选框共享同一个开关。

修复步骤 #

1. 修改组件逻辑：给每个item添加独立的disabled属性

把全局的disabled变量去掉，转而给每个item对象添加自己的disabled属性，这样每个条目都有自己的禁用状态：

// 去掉原来的private disabled: boolean;声明
for (let item of items) {
  if (item.id == Status.required) {
    item.status = true;
    item.disabled = true; // 给当前item设置禁用状态
  } else if (item.id != Status.required && item.list.length > 0) {
    item.status = item.id == Status.checked;
    item.disabled = false;
  } else {
    item.status = item.id == Status.unchecked;
    item.disabled = false;
  }
}

2. 修改HTML绑定：绑定到当前item的disabled属性

把原来绑定全局disabled的地方，改成绑定到item.disabled，这样每个复选框只受自己对应条目的状态控制：

<input 
  class="form-control" 
  [attr.disabled]="item.disabled ? true : null" 
  type="checkbox"
  [checked]="item.status" 
  (click)="itemChecked($event, item)" 
/>

（可选）更简洁的Angular写法

其实Angular的[disabled]指令可以直接绑定布尔值，它会自动帮你添加/移除disabled属性，不用手动判断true或null：

<input 
  class="form-control" 
  [disabled]="item.disabled"
  type="checkbox"
  [checked]="item.status" 
  (click)="itemChecked($event, item)" 
/>

验证效果 #

做完上面的修改后，每个条目都会根据自己的id和list状态，独立设置自己复选框的禁用/启用状态，不会再出现全部禁用的情况啦。

内容的提问来源于stack exchange，提问作者bluePearl