防止复选框标签切换复选框

Question

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

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

每当我单击名称标签时，该复选框就会切换到我不希望的位置。 单击label时，如何防止这种切换。我也尝试了所有其他帖子，但无法提出解决方案。 我无法使用jQuery 。

Answer 1

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

根据您的设计，您可以为<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>

在组件打字稿代码中：

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