如果选中一个复选框，则选中并禁用其他复选框“角度”

Question

选中“第一键”复选框时，我想选中并禁用“第二键”复选框

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>

为复选框键入脚本代码

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;
}

}

通过使用此代码，key 2复选框被选中并禁用。但是key 2复选框的布尔值仍然是假的。当我单击key 1复选框时，关于如何将key 2复选框的布尔值更改为true的任何建议我正在使用Angular 8及其反应式形式模块。我是角度新手。

Answer 1

您可以订阅第一个复选框的< code>valueChanges观察值，即< code>key1。

演示片段:

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

其中formName是反应式表单的名称。此外，不要忘记取消订阅这个可观察的组件销毁。