lundi 30 mars 2020

Angular 9: Disable label checkbox (not the box)

I need to make clickable a piece of the checkbox label (Privacy Policy). This is the snippet:

    <div>
      <mat-checkbox required formControlName="privacyCheck" [checked]="false">
        <b style="color: crimson">*</b>Accetto la
        <i style="color: #770E0E" (click)="printDebug()">privacy policy</i>
        e i termini di condizione dell'utilizzo del servizio.
      </mat-checkbox>
    </div>

At the moment, if i click on the italic text ("privacy policy"), i got the printDebug but of course the checkbox will be setted to "checked".

I tried several solutions using CSS property pointer-events: none !important; on .mat-checkbox-layout .mat-checkbox-label span, .mat-checkbox-layout .mat-checkbox-label, and so on.


enter image description here

enter image description here




Aucun commentaire:

Enregistrer un commentaire