Search code examples
cssangularangular-materialangular12

Prevent the check of a mat-checkbox by clicking on its label

I need to prevent the check of a checkbox by clicking on its label.

I use the angular material checkbox.

I partially manage to do it using the preventDefault() method but the checkbox still shows focus style if I click on the label.

What I need is: if I click on the label, nothing should happen to the checkbox (not checked, not focused on).

Please take a look at this stackblitz link to better understand my issue: https://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html

Solution

  • If you don't want to change ripple behavior or CSS, try this:

    <span (mousedown)="$event.stopPropagation()" (click)="check($event)">
    Check me!
</span>

    The ripple effect is triggered from the mousedown event (hence why you don't see them when using the space bar), and you need to use stopPropagation(), as preventDefault() isn't enough here.

    StackBlitz link here