ion-Checkbox only on box clickable

Issue

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;
}

Answered By - Augustin R