How to disable a checkbox based on conditions in angular 6?

Question

My html code,

<div>
  <div>
   <input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
   <label class="label" for="Checkbox0" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
   <label class="label" for="Checkbox1" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
   <label class="label" for="Checkbox2" >first</label>
  </div>
</div>


 <div>
  <div>
   <input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
   <label class="label" for="Checkbox3" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
   <label class="label" for="Checkbox4" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
   <label class="label" for="Checkbox5" >first</label>
  </div>
</div>

Likewise I have two more separate divs in the same html file which contains checkboxes. What I need to do is onclick of first checkbox in first div ,I need to disabled every other checkboxes from the first div,second div & third.

As I'm totally new to angular I have no idea how to disable here. I have tried using ng-disabled but it seems not working. Can someone help me with this?

Hitlerism

Try [disabled]. ng-disabled is AngularJS syntax. – Streaky

Answer 1

ng-disabled is AngularJS syntax. You can use [disabled] input for disable checkboxes.

<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">

in .ts isDisabled : boolean;

---

Optional thing

You can use Angular Material for your developments. because it has many advantages. And also it has well defined API.

<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

Angular Material

Mohn

Answer 2

For Angular 2+, you can enable / disable the checkbox by setting the disabled attribute on the input type=checkbox

Use: [attr.disabled]="isDisabled ? true : null"

Note here that [attr.disabled]="isDisabled" alone will not work. You will need to explicitly set disabled attribute to null for removing disabled attribute from the disabled checkbox.

<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />

Weider

Needed the null. Weird that false wouldn't re-enable the checkbox – Paz

I am on Angular 12 and this is the only solution that worked for me. I tried [disabled] as well as ng-disabled and both did not work. – Melany

Answer 3

You can use the [disable] attribute your input[type="checkbox"] tag.

For eg: -

<input [disabled]="isDisabled" type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">

isDisabled variable will hold the boolean value in your .ts

Recess

Answer 4

For larger, more complex forms I highly recommend using a reactive form. With a reactive form, you can use [disabled]="condition" where the condition is something like whateverCheckbox.value.

UPDATE: I updated my answer to use whateverCheckbox.value as opposed to whateverCheckbox.checked. This approach only works with reactive forms. I highly recommend using reactive forms for larger, more complex forms where you may need more detailed, personalized control over the elements of the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data.

Here is the documentation: https://angular.io/guide/reactive-forms

Once you have the form set up as a reactive form, a form control instantiated and bound to the checkbox input form element, you should be able to access the value of the checkbox as indicated above.

UPDATE 2: You don't necessarily need to use a form either to take advantage of a reactive form control.

In your component.ts file import FormControl from @angular/forms as below:

import { FormControl } from '@angular/forms';

Then declare the form control in the component class, as such:

checkbox1 = new FormControl('');

Then in your template, simply bind that FormControl to the input element as such:

<input type="checkbox" [formControl]="checkbox1">

and then you should be able to access that value anywhere using:

checkbox1.value

Whortleberry

[disabled]="Checkbox1.checked" condition is not working @Mr Shantastic – Hitlerism

I'm sorry, I'm used to using reactive forms. I believe this approach works with reactive forms. Reactive forms are highly recommended for larger, more complex forms. Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams. I'll update my answer shortly with this information. – Whortleberry

Answer 5

If you are using reactive forms you can also disable the checkbox from the component like this

import { FormBuilder, FormGroup } from '@angular/forms';

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

ngOnInit(): void {
 this.myForm = this._fb.group({
   myCheckBoxInput: [{value: 1, disabled: true}],
 });
}

Roughage

Answer 6

in reactive form, you can disable the checkbox like so

this.formGroup.get('Checkbox1').disable({ onlySelf: true });

Diastema