htmlionic-frameworkionic3ion-checkbox

ion-Checkbox only on box clickable

I want to separate my <ion-checkbox> from <ion-label>. So the main issue is that I have to display additional informations if you click on the label, but you should not activate the checkbox. The checkbox should only be activated, if clicked on the "checkbox icon/checkbox square".

<div>
  <ion-list>
    <ion-item *ngFor="let list of list">
    <ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
    <ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
  </ion-item></ion-list>
</div>

Can someone help me?

Solution

  • You can try to add this piece of code to your CSS. It will hide the overlay which wraps both your checkbox and your label.

    ion-checkbox .item-cover{
  display:none;
}