通过单击其标签来防止选中 mat-checkbox

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

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

我使用 angular material 复选框。

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

我需要的是：如果我点击标签，复选框不会发生任何变化（未选中，未聚焦）。

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

在style.css下方添加css并勾选

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

如果您不想改变纹波行为或 CSS，试试这个：

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

涟漪效应是由 mousedown 事件触发的（因此你在使用 space 条时看不到它们），你需要使用 stopPropagation()，因为 preventDefault() 这里不够。

StackBlitz link here