Question

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

HTMLcode

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

}

通过使用此代码，key2复选框被选中并禁用。但是key2复选框的布尔值仍然为false。单击“ key1”复选框时如何将“ key2”复选框的布尔值更改为true的任何建议我正在使用Angular 8及其反应形式模块。我是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

1 个答案: