求助：Angular 8中如何在循环内禁用未勾选的复选框

问题分析 #

你原来的代码[attr.disabled]="isChecked == true ? '' : disabled"存在两个核心问题：

1. HTML中disabled属性只要存在就会生效，哪怕值为空字符串，用attr.disabled无法精准控制禁用状态；
2. 循环场景下需要绑定每个列表项自身的勾选状态，而非单个全局变量。

基础实现：直接禁用所有未勾选复选框 #

如果需求是默认禁用所有未被勾选的复选框，按以下步骤操作：

1. 组件内定义带状态的列表数据
   每个列表项需包含checked属性来维护自身的勾选状态：

// 组件.ts文件
export class YourComponent {
  items = [
    { id: 1, label: '选项A', checked: false },
    { id: 2, label: '选项B', checked: true },
    { id: 3, label: '选项C', checked: false }
  ];
}

2. 模板循环渲染并绑定状态
   使用Angular的属性绑定[disabled]（而非attr.disabled），根据当前项的checked值控制禁用：

<!-- 组件.html文件 -->
<div *ngFor="let item of items">
  <input 
    type="checkbox" 
    [(ngModel)]="item.checked" 
    [disabled]="!item.checked"
  >
  <label>{{ item.label }}</label>
</div>

3. 必要的模块配置
   因为用到了[(ngModel)]双向绑定，需要在对应模块中导入FormsModule：

// 模块.ts文件
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他已导入模块
    FormsModule
  ]
})
export class YourModule { }

进阶实现：有勾选项时禁用其余未勾选项 #

如果需求是只要有一个选项被勾选，就锁定所有未勾选的复选框，调整逻辑如下：

1. 组件内添加状态判断方法

export class YourComponent {
  items = [/* 同上列表数据 */];

  // 判断是否存在已勾选的项
  get hasCheckedItem(): boolean {
    return this.items.some(item => item.checked);
  }
}

2. 模板中更新禁用条件

<div *ngFor="let item of items">
  <input 
    type="checkbox" 
    [(ngModel)]="item.checked" 
    [disabled]="hasCheckedItem && !item.checked"
  >
  <label>{{ item.label }}</label>
</div>

此时只要有任何选项被勾选，未勾选的选项会被禁用；若所有选项都取消勾选，所有复选框会恢复可操作状态。

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