Still able to select disabled checkbox in Mat table

2
votes

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>
2
angularcheckboxmat-table
remove (click)="selection.toggle(row)" from tr-mat-row - Amit Baranes
@AmitBaranes or use a condition that is similar to the disabled condition on it too - user4676340
Thanks That worked. But why does selection.toggle(row) allow that? - Flash

2 Answers

2
votes

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.

1
votes

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.