ion-Checkbox only on box clickable

Question

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?

Answer 1

This does not work with Ionic 4 because Shadow Dom creates a button element that overlays the label element and captures the click events. A workaround for Ionic 4 is to wrap the ion-checkbox with a span, and make it relative. This way, the button in the Shadow Dom will fit only this new span, keeping the label free to asign a custom click event.

<span class="checkbox-container">
    <ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>

.checkbox-container {
   position: relative;      
}

Answer 2

For ionic-4, give the property "position:relative" to ion-checkbox. It works !

ion-checkbox {
   position:relative;
}