css - 通过单击其标签来防止检查 mat-checkbox

Question

我需要通过单击其标签来防止选中复选框。

我使用角材料复选框。

我使用该方法部分设法做到这一点，preventDefault()但如果我单击标签，复选框仍会显示焦点样式。

我需要的是：如果我点击标签，复选框不会发生任何事情（未选中，未关注）。

请查看此 stackblitz 链接以更好地理解我的问题：https ://stackblitz.com/edit/angular-2zyvdp?file=src%2Fapp%2Fcheckbox-overview-example.html

Answer 1

如果您不想更改波纹行为或 CSS，请尝试以下操作：

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

涟漪效应是从 mousedown 事件触发的（因此为什么在使用空格键时看不到它们），您需要使用stopPropagation()，因为preventDefault()这里还不够。

StackBlitz 链接在这里

Answer 2

在 style.css 中添加下面的 css 并检查

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