有条件时禁用"角度材质"复选框

Question

在我的Angular应用程序中，我有一个动态生成的具有多个FormArray的反应表单。在这些FormArrays中的上包含6个复选框。我只希望用户能够选中3个复选框，所以我有一个所选复选框数量的计数。当计数超过3时，布尔值设置为true，如果计数低于3，则再次设置为false。这里的问题是，一旦复选框被禁用，用户就无法取消选择他所选的框之一，因为复选框被完全禁用。

我试图实现的是，一旦计数高于3，就不能再选择未选中的复选框，而用户仍然可以取消选择他已经选择的复选框。

我使用的是带有[disabled]属性的"角度材质"复选框。我如何实现所描述的行为？

HTML

<mat-checkbox *ngIf="option.key === 'vacancy'" (change)="onCheckboxChangeEvent(option.key, value, $event)" [checked]="isActiveValue(optie.key, value)" [disabled]="vacancyDisabled">
{{ value }}</mat-checkbox>

TS

onCheckboxChangeEvent(
key: string,
value: string,
event: MatCheckboxChange
): void {
const feature = this.candidateForm?.get(key) as FormArray;
if (event.checked) {
if (key === 'vacancy') {
this.selectedVacancy++;
if (this.selectedVacancy >= 3) {
this.vacancyDisabled = true;
console.log('disable');
}
}
feature.push(new FormControl(value));
} else {
if (key === 'vacancy') {
this.selectedVacancy--;
if (this.selectedVacancy <= 3) {
this.vacancyDisabled = false;
console.log('enable');
}
}
const index = feature.controls.findIndex((x) => x.value === value);
feature.removeAt(index);
}
}

Answer 1

您可以使用选中的值仅禁用未选中的复选框

<mat-checkbox *ngIf="option.key === 'vacancy'" (change)="onCheckboxChangeEvent(option.key, value, $event)" 
[checked]="isActiveValue(optie.key, value)" 
[disabled]="vacancyDisabled  && ! isActiveValue(optie.key, value)">
{{ value }}
</mat-checkbox>