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

【问题标题】：If one checkbox is checked,check And disable other checkbox Angular如果选中一个复选框，请选中并禁用其他复选框 Angular
【发布时间】：2020-09-02 09:00:08
【问题描述】：

当 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>

复选框的打字稿代码

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 新手。

【问题讨论】：

永远不要直接使用 Angular 操作 DOM 元素。我不知道您真正想要实现什么，但您不认为单选按钮可能是更好的选择吗？
感谢您的建议。每当单击 key1 复选框时，我都想检查（布尔值 = true）并禁用 key2 复选框。有什么办法可以实现吗？
如果您希望一次只选中一个复选框，请选择单选按钮，而不是使用复选框。
@AbhishekTewari 我希望在我单击 key1 复选框时检查它们

标签： typescript checkbox angular8 angular-reactive-forms

【解决方案1】：

您可以订阅第一个复选框的valueChanges observable，即key1。

演示sn-p：

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

其中 formName 是您的反应式表单的名称。也不要忘记在组件销毁时取消订阅这个 observable。

【讨论】：

我会检查这个方法。感谢您的回复。
如果它解决了您的问题，请点赞并接受答案。
@Pratik 很高兴为您提供帮助。 :) 请为答案投票。