'ion-item with checkbox and "a" element - click on "a" element clicks whole item and checkbox

I have ion-item, with ion-checkbox and ion-labels elements inside, and an a element inside ion-label:

<ion-item class="userAgreement" text-wrap no-border no-lines>
  <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
  <ion-label>I accept the terms of 
     <a (click)="GoToUserAgreementPage()" class="linkText">User 
     Agreement</a>
  </ion-label>
</ion-item>

Checkbox is clickable itself, but when I click on User agreement text inside ion-label, whole ion-item is clicked and it affects checkbox. I want checkbox to be clickable only if clicked on itself, and be able to click only on that part of text inside a element inside ion-label.

Solution 1:^[1]

If you take a look at the Ionic docs that's actually how a checkbox with a label wrapped in an ion-item works.

To get the behaviour you want, don't wrap your checkbox and label in an ion-item, but instead recreate the look of an ion-item. Therefore you could use display: flex or a grid.

Raw draft using display: flex and some inline styles looks something like this:

<div style="align-items: center; display: flex">
    <ion-checkbox style="padding-right: 10px" formControlName="agreementCheckbox"></ion-checkbox>
        <ion-label>I accept the terms of
                <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
        </ion-label>
</div>

Solution 2:^[2]

Just wrap the ion checkbox with an ion-item. In my case I don't want any label but if you want just use for.

<ion-item class="userAgreement" text-wrap no-border no-lines>
  <ion-item>
    <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>
  </ion-item>
  <ion-label>I accept the terms of 
     <a (click)="GoToUserAgreementPage()" class="linkText">User 
     Agreement</a>
  </ion-label>
</ion-item>

Solution 3:^[3]

Try wrapping the ion-checkbox within another ion-item. It appears to me the parent ion-item will not propagate click events to any controls inside child ion-items.

Clicking on the child ion-item will toggle the checkbox as expected.

<ion-item class="userAgreement" text-wrap no-border no-lines>

  <ion-item>

    <ion-checkbox formControlName="agreementCheckbox"></ion-checkbox>

  </ion-item>

  <ion-label>I accept the terms of 
    <a (click)="GoToUserAgreementPage()" class="linkText">User Agreement</a>
  </ion-label>
</ion-item>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Phonolog
Solution 2	EXPERT AD
Solution 3	Julian

'ion-item with checkbox and "a" element - click on "a" element clicks whole item and checkbox

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]