如果选中一个复选框，选中并禁用其他复选框 Angular

Question

选中key1复选框后，我想选中并禁用key2复选框

HTML代码

<input class="form-check-input" type="checkbox" formControlName="key1" id="key1" (click)="key1Click()">
            <label for="key1" class="form-check-label">Key 1</label>
            <input class="form-check-input" formControlName="key2" type="checkbox" id="key2">
            <label for="key2" class="form-check-label">Key 2</label>

复选框的 Typescript 代码

keyClick() {

let x = <HTMLInputElement>document.getElementById("key1");
let y = <HTMLInputElement>document.getElementById("key2");
if (x.checked) {
  y.checked = true;
  y.disabled = true;
}
else {
  y.checked = false;
  y.disabled = false;
}

}

通过使用此代码，key2 复选框被选中并被禁用。但是 key2 复选框的布尔值仍然是 false。关于如何在单击 key1 复选框时将 key2 复选框的布尔值更改为 true 的任何建议我正在使用 Angular 8 及其反应形式 module.I 是 angular 的新手。

Answer 1

您可以订阅第一个复选框的 valueChanges 可观察对象，即 key1。

演示片段：

this.formName.get("key1").valueChanges.subscribe(val=>{
    if(val)
    //enable the second checkbox
    else 
    //disable the second checkbox
});

其中 formName 是您的反应式表单的名称。也不要忘记在组件销毁时取消订阅此可观察对象。

如果选中一个复选框，选中并禁用其他复选框 Angular

If one checkbox is checked,check And disable other checkbox Angular

checkbox

typescript

angular-reactive-forms

angular8