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

Question

When key1 checkbox is checked, I want to check and disable key2 checkbox

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>

Typescript code for checkbox

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

}

By using this code key2 checkbox is checked and disabled. But the boolean value of key2 checkbox remains false. Any suggestions on how can I change the boolean value of key2 checkbox to true when I click key1 checkbox I am using Angular 8 and its reactive forms module.I am new to angular.

Do not never ever manipulate DOM elements directly with Angular. I don't know what you really want to achieve, but don't you think that radio buttons could be a better choice? — HTN
– HTN, Commented May 16, 2020 at 15:02
Thanks for the suggestion. Whenever key1 checkbox is clicked I want to check (boolean value = true) and disable key2 checkbox . Is there any way I can achieve that? — Pratik
– Pratik, Commented May 16, 2020 at 16:39
if you want only one checkbox to be checked at a time, go for radio buttons, instead of using checkboxes. — Abhishek Tewari
– Abhishek Tewari, Commented May 16, 2020 at 16:47
@AbhishekTewari I want them both checked when I click key1 checkbox — Pratik
– Pratik, Commented May 16, 2020 at 16:49

Abhishek Tewari · Accepted Answer · 2020-05-16 16:52:25Z

0

You could subscribe to the valueChanges observable of the first checkbox,i.e., key1.

Demo snippet:

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

where formName is the name of your reactive form. Also don't forget to unsubscribe to this observable on component destroy.

answered May 16, 2020 at 16:52

Abhishek Tewari

4254 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pratik Over a year ago

I will check this method. Thanks for the reply.

Abhishek Tewari Over a year ago

Kindly upvote and accept the answer if it solves your problem.

Abhishek Tewari Over a year ago

@Pratik Happy to help. :) Kindly upvote the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related