防止复选框 Label 切换复选框

Question

Here is my checkbox in angular and i want to prevent the default behaviour of it.

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

Here whenever i click on name label...the checkbox gets toggled which i do not want to.. How can i prevent this from toggling when click on label. I have tried all others post too but I could not come up with the solution. I can not use jQuery .

Answer 1

you need to add label after completing the <mat-checkbox> tag.

According to your design, you can add style to the <mat-label>

Replace your line of code with the below shown code:

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

above image is generated by below code

<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

Based on @Mike S. comment:

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

in your component typescript code:

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