防止复选框 Label 切换复选框

Question

这是我在 angular 中的复选框，我想阻止它的默认行为。

<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">Name</mat-checkbox>

在这里，每当我单击名称 label 时...复选框被切换，我不想这样做.. 当单击 label 时，如何防止它切换。 我也尝试了所有其他帖子，但我无法提出解决方案。 我不能使用 jQuery 。

Answer 1

您需要在完成<mat-checkbox>标签后添加 label。

根据您的设计，您可以为<mat-label>添加样式

用下面显示的代码替换您的代码行：

  <div layout=row>
     <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule"></mat-checkbox>
    <mat-label> Name </mat-lable>
</div>

上图由以下代码生成

<div align="left" class="user-modified-rule">
  <div layout="row">
        <mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
        </mat-checkbox>
        <mat-label> 
          <rule></rule>
        </mat-label>
  </div>
</div>

and css code 

.user-modified-rule {
    display: inline-block;
    width : 48%;
}

Answer 2

基于@Mike S. 评论：

<mat-checkbox (change)="changeSelectionTo()" [(ngModel)]="isChangeRule">
  <span (click)="myCheck($event)">Name</span>
</mat-checkbox>

在您的组件 typescript 代码中：

myCheck(event) {
    event.preventDefault();
    //YOUR LOGIC
}