如果复选框本身被选中，有没有办法检查 mat-checkbox？答案

【问题标题】：Is there a way to have the mat-checkbox checked if the box itself is checked?如果复选框本身被选中，有没有办法检查 mat-checkbox？
【发布时间】：2021-05-12 01:21:40
【问题描述】：

我的复选框中有一个链接，当我单击该链接时，它也会选中该框。有没有办法禁用它？我不想删除复选框之外的文本，所以如果有办法做到这一点，那就太好了。

<mat-checkbox>
Checkout this <a (click)="getLink('linkurl')">Link</a>.
</mat-checkbox>

【问题讨论】：

首先，只是想评论一下这是不可取的，因为删除表单控件标签的默认行为会影响可访问性/交互性。话虽如此，您只希望文本“链接”不切换复选框，还是所有文本“结帐”以及“链接”？

标签： angular angular-material angular-material2

【解决方案1】：

想首先将其标记为不可取。 Anchors should not be placed inside of labels，点击标签切换复选框输入的能力是设计的，帮助人们使用触摸屏设备等。

话虽如此，您可以将 $event 参数传递给您的事件处理程序并调用 .preventDefault() 以停止默认操作。

(click)="getLink('linkurl', $event)

在你的组件类中

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  getLink(linkurl: string, event: MouseEvent) {
    event.preventDefault(); // stops the checkbox from being selected.
    ...
  }
}

【讨论】：

谢谢你.. 直到现在我才知道 preventDefault

【解决方案2】：

您可以将 event.preventDefault() 添加到您的点击事件中：

(click)="getLink('linkurl'); event.preventDefault()"

【讨论】：