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?

Answer 1

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" />

Answer 2

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

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

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

Answer 5

in reactive form, you can disable the checkbox like so

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

Answer 6

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}],
 });
}