在檢查其他3個復選框時，如何檢查和禁用復選框

Question

HTML 代碼（formArray 中有 4 個復選框）：

（我在控制台中被禁用並檢查為真，但無法在 UI 中反映它，即在選擇其他三個復選框時檢查並禁用 UI 上的第一個復選框）

 <div formArrayName="permissionForm"> <div *ngFor="let subModule of permissionForm.value; let i = index" [formGroupName]="i"> <input type="text" readonly formControlName="moduleGroupName" class="input-border-module" style="margin-top: 5px;" /> <br /> <label class="col-md-5 text-left"> <input type="text" readonly formControlName="subModules" class="input-border-submodule" /> </label> <input type="checkbox" formControlName="view" id="view1" /> <input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd($event)"/> <input type="checkbox" formControlName="edit" (change)="isCheckedEdit($event)" /> <input type="checkbox" formControlName="delete" (change)="isCheckedDelete($event)"/> </div> </div>

TS 代碼：（這里添加、編輯和刪除是布爾值）（我在控制台中被禁用並檢查為 true，但無法在 UI 中反映它，即檢查並禁用 UI 上的第一個復選框，選擇其他三個復選框）

 isCheckedAdd(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.add = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } } isCheckedEdit(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.edit = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } } isCheckedDelete(event) { let x = < HTMLInputElement > document.getElementById("view1"); this.delete = true; if (this.add == true && this.edit == true && this.delete == true) { x.checked = true; x.disabled = true; } }

Answer 1

您可以使用 FormControl 的disable()方法。

代碼應如下所示

在 HTML 中，

<input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd(i)"/>

在 TS 中，

isCheckedAdd(i: number) {
  const permissionFormControls = this.form.controls.permissionForm as FormArray; // Not sure what the name of FormGroup you are using but I assume it's "form"
  permisionFormControls[i].controls.edit.disable();
  permisionFormControls[i].controls.delete.disable();
}