ion-Checkbox only on box clickable - html

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

Answer 3

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

Answer 4

This did the trick for me:
ion-checkbox {
.item-cover {
width: 70px;
}
}

Answer 5

For ionic 4 there is a workaround by using the start slot of ion-item as laid out here.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
With lines="full" the bottom border is fixed.

Answer 6

For whoever gets here via Google like me, using Ionic 6 (2022) - I resolved this issue giving the label a z-index:3.
This also works for an ion-button slotted at end.
<ion-item>
<ion-label>Select/unselect all</ion-label>
<ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
<ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
<ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>
Credits: https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/