CODEWITHSUNDEEP
angularcheckboxmat-table
Flash
Flash

Reputation: 1014

Still able to select disabled checkbox in Mat table

I have Mat table with a checkbox column. I am setting certain checkboxes to disabled based on certain conditions. However the user is still able to select the checkbox if the click on the row. How do I prevent the checkbox from being selected when disabled: Here is a stackblitz example I forked from the material design site: https://stackblitz.com/edit/angular-erpaus?file=app%2Ftable-selection-example.html. you can't click the check box but if you click outside of it the checkbox gets selected: enter image description here

<mat-checkbox (click)=      "$event.stopPropagation()"
                              (change)="$event ? selection.toggle(row) :null"
                              [checked]="selection.isSelected(row)" 
                              [disabled]="myCondition"
                               color="primary">
                </mat-checkbox>

Upvotes: 3

Views: 7539

Answers (2)

youri
youri

Reputation: 1160

As @AmitBaranes says remove (click)="selection.toggle(row)" should work, but you will not be able to select a row if the condition is true. If you want to disable certain rows and enable others you could implement the condition like this (click)="!row.excluded && selection.toggle(row)". See the full example in stackblitz.

Upvotes: 2

Kamil Augustyniak
Kamil Augustyniak

Reputation: 429

I think, when you click on row, the row is select. In your code: [checked]="selection.isSelected(row)" checks if row is selected and when this expression return true, checkbox will select so you must turn off selecting row after click.

Upvotes: 1

Related Questions