23

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?

sai
  • 487
  • 1
  • 7
  • 16

6 Answers6

33

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" />
Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
akhouri
  • 3,065
  • 3
  • 25
  • 29
  • 4
    Needed the `null`. Weird that `false` wouldn't re-enable the checkbox – brt Jan 20 '21 at 23:01
  • 1
    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. – Moiz Tankiwala Jan 20 '23 at 10:07
20

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

darkz
  • 550
  • 4
  • 9
5

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

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
3

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
cklimowski
  • 589
  • 6
  • 21
Mr Shantastic
  • 510
  • 1
  • 7
  • 16
  • [disabled]="Checkbox1.checked" condition is not working @Mr Shantastic – sai Aug 10 '18 at 03:22
  • 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. – Mr Shantastic Aug 10 '18 at 11:49
0

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}],
 });
}
Winnipass
  • 904
  • 11
  • 22
0

in reactive form, you can disable the checkbox like so

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

Nerdroid
  • 13,398
  • 5
  • 58
  • 69