CODEWITHSUNDEEP
angularcheckbox
bluePearl
bluePearl

Reputation: 1257

Angular 2 attr.disabled not behaving as expected

I have a list of items to display and alongside each item there is a checkbox. I have a condition statement to check whether each item's checkbox should be disabled or enabled. For some unclear reason every checkbox in my list is disabled and i am not sure if it is how i set up the [attr.disabled] or an error in my condition statement.

Here is my html: 

 <input class="form-control" [attr.disabled]="disabled == true ? true : null"
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

In my component: 

private disabled: boolean;

for( let item of items){
if (item.id == Status.required) {
                item.status = true;
                this.disabled= true;
            } else if (item.id != Status.required && item.list.length > 0) {
                item.status = item.id == Status.checked
                this.disabled= false;
            } else {
                item.status = item.id == Status.unchecked;
                this.disabled= false;
            }
    }

Currently in my list regardless of the status of my item, all check boxes are disabled and not sure why.

Upvotes: 1

Views: 5539

Answers (3)

bluePearl
bluePearl

Reputation: 1257

Thanks to @NanditaAroraSharma I was able to realize that this.disabled was been overridden every time a list item's status changed and thus reflecting the last status of the list and applying it to all the items. I updated my [attr.disabled] = "item.id == 1 ? true : null" and now only the items that really should be disabled are disabled.

Upvotes: 5

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38683

try this

<input class="form-control" [ngClass]="{'disableDiv': disabled  === true}" 
     type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

in css

.disableDiv {
        pointer-events: none;
    }

Upvotes: 1

bereket gebredingle
bereket gebredingle

Reputation: 13006

try this one [disabled]

<input class="form-control" [disabled]="disabled == true ? true : null"
 type="checkbox"[checked]="item.status" (click)="itemChecked($event, item)" />

Upvotes: 3

Related Questions