如何实现Angular Material Checkbox按条件仅禁用未选中复选框

问题根因 #

你当前用全局布尔值vacancyDisabled统一控制所有复选框的禁用状态，触发阈值后所有复选框都会被禁用，无法区分已选和未选的项。

第一步：修改HTML模板绑定逻辑 #

将[disabled]的绑定规则改为：仅当触发限制、且当前复选框未被选中时，才禁用该复选框，修正后代码如下：

<mat-checkbox 
  *ngIf="option.key === 'vacancy'" 
  (change)="onCheckboxChangeEvent(option.key, value, $event)" 
  [checked]="isActiveValue(option.key, value)" 
  <!-- 只有限制开启 且 当前项未选中时才禁用 -->
  [disabled]="vacancyDisabled && !isActiveValue(option.key, value)"
>
  {{ value }}
</mat-checkbox>

注意：你原有代码中isActiveValue(optie.key, value)存在笔误，optie需改为option。

第二步：优化TS逻辑 #

你可以直接复用FormArray的长度判断已选数量，避免手动计数出现不同步问题，也可以保留原有selectedVacancy计数逻辑，修正阈值判断即可，修改后代码如下：

onCheckboxChangeEvent(
    key: string,
    value: string,
    event: MatCheckboxChange
): void {
    const feature = this.candidateForm?.get(key) as FormArray;

    if (event.checked) {
        feature.push(new FormControl(value));
        // 针对vacancy做阈值判断
        if (key === 'vacancy') {
            // 直接用FormArray长度判断，无需手动计数，也可以替换为this.selectedVacancy++后的判断
            this.vacancyDisabled = feature.length >= 3;
        }
    } else {
        const index = feature.controls.findIndex((x) => x.value === value);
        feature.removeAt(index);
        if (key === 'vacancy') {
            // 已选数量小于3时解除限制
            this.vacancyDisabled = feature.length >= 3;
        }
    }
}

如果要保留原有selectedVacancy计数逻辑，只需要修改阈值判断条件即可：选中时selectedVacancy >=3设为true，取消选中时selectedVacancy >=3维持true，小于3才设为false。

逻辑说明 #

当已选数量达到3个时，vacancyDisabled为true，此时只有未被选中的复选框会命中禁用条件，已选中的复选框仍可正常操作；用户取消选中后已选数量小于3，vacancyDisabled变为false，所有复选框恢复可选。

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