CODEWITHSUNDEEP
cssangularangular-materialangular12
user9721056
user9721056

Reputation:

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

Upvotes: 1

Views: 4092

Answers (2)

JossFD
JossFD

Reputation: 2216

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

Upvotes: 2

Harshsetia
Harshsetia

Reputation: 265

Add below css in style.css & check

span.mat-ripple.mat-checkbox-ripple.mat-focus-indicator {background: none !important;opacity: 0 !important;}

Upvotes: 0

Related Questions