Disable checkbox from activating on container click

Hello, everyone, I am using Ionic V5 here and I enjoy it a lot!

But being a newbie I have the following problem which gave me quite the challenge.

I have an ion-card which contains an ion-checkbox and other elements. Whenever I click on the ion-card or on any element inside it the checkbox will activate. How do I stop this from happening?



    <ion-item (click)="handleServiceClick($event, service.id)">

      <ion-checkbox color="primary" slot="start" [checked]="service.isChecked"></ion-checkbox>

      <ion-label> {{ service.title }}</ion-label>

      <ion-button (click)="handleMoreInfoClick($event)">

        <ion-icon name="information-circle-outline"></ion-icon>





Thank you,

My rule of thumb is that each <ion-item> must have at most one user-interactable element, including the item itself (and you’ve got three).