How to prevent that clicking the label checkbox acts on the checkbox?

Ionic Framework ionic-v3
1

Hi,
I’d like to have a checkbox to enable the Terms and Conditions.
But with this code:

    <ion-item class="terms">
      <ion-label color="primary">{{ 'I accept terms and conditions' | translate }} 
		<a class="terms_link" href="/terms-privacy">{{ 'Read here..' }}</a>
	  </ion-label>
      <ion-checkbox color="primary" formControlName="terms"></ion-checkbox>
    </ion-item>

When I click on the label it checks or unchecks the checkbox and it is not possible to follow the link of terms and conditions.
Is it possible to make that the label doesn’t act on the checkbox?

Thank you

cld

2

I think it’s because of your checkbox actually spans to a width that the checkbox covers the text

3

Yes right, it is something similar, I’ve seen, using Chrome inspector, that inside the checkbox there is a button with this style:

button {
    left: 0;
    top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
     width: 100%;
    height: 100%; 
}

If I set from the inspector width e height to 10% or if I disable them, then the label works as I want.
The problem is that I can’t modify this value from css.
I’ve tried:

button {
     width: 10%;
    height: 10%; 
}

.terms button {
     width: 10%;
    height: 10%; 
}

without success.

cld

4

I’ve replaced the ion-item tag with a div.
The innerHtml with the button now there isn’t.

    <div class="terms">
      <ion-label color="primary" (click)="openTerms($event)" >{{ 'I accept terms and conditions' | translate }}</ion-label>
      <ion-checkbox mode="md" color="primary" formControlName="terms"></ion-checkbox>
    </div>