[SOLVED] Can I disable a checkbox from activating when clicking on a label?

I would like to use an ion-checkbox in my app but for my desired functionality I would rather the checkbox not become active when I click the corresponding label. I would like the label to perform one action, and the checkbox to perform another. I have tried a couple different variations of this, none of which have worked.

Example code:

<ion-list>
    <button ion-item *ngFor="let task of tasks" (click)="viewTask(task)">
      <ion-checkbox></ion-checkbox>
      <ion-label>{{task.title}}</ion-label>
    </button>
  </ion-list>

Thanks in advance for any help.

@DevinShoe - ion-checkbox creates an overlay that masks the whole button - by hiding it you can control the behaviour of ion-label by attaching a (click) method

CSS -

ion-checkbox .item-cover{
  display:none;
}

In template -

<ion-list >
      <ion-item>
      <ion-checkbox></ion-checkbox>
      <ion-label (click)="customLabelFunc($event)">{{task.title}} </ion-label>
     </ion-item>
  </ion-list>

Typescript -

customLabelFunc(e){
      e.preventDefault();
      alert('label clicked')
    }

Here is a codepen - https://codepen.io/anon/pen/awWOjr

Awesome! Thank you very much, that worked. However, why is the $event.preventDefault(); necessary? I seem to be able to get my desired functionality without it.

You’re right, you can drop that line - i assumed label had the “check” functionality bound by default, didn’t double-check that in the codepen, sorry.

No worries, thanks again.

1 Like

Can I ask how you found that CCS element for the ion-checkbox? I looked at the documentation and did not see that option in the “Sass Variables” section.

I used the “Inspect Element” in Chrome and went through the elements generated by ionic - i noticed that there is an overlaying element within the html generated by ionic.

1 Like

I would find this a supremely confusing UI. Labels that are supposed to respond to clicks are called “buttons”.

That is fair. I’m still experimenting with the UI, but this is the best I have come up with so far. For context, this is a to-do list oriented app and I want to be able to quickly check off an item, as well as view an item for editing (the item will have more detail other than the title that can only be viewed when editing and or viewing the item), and this was the simplest view for that. I have thought about implementing a pop over menu with an edit button, but it seems like a bit much. The anti-pattern I haven’t gotten away from is using a checkbox as a delete button, instead of a multi-select. I do want batch operations eventually, so this may change.

Isn’t this actually pretty common in web and mobile UIs that clicking the labels of checkboxes or radio buttons also act as a bigger click/tap target for the input element itself? It is the default behaviour in Ionic as well - that’s why a workaround is actually needed :wink:

I was kind of expecting someone to respond with “text next to a checkbox that looks like a label should always activate/deactivate the input”… not the opposite.

But the use case @DevinShoe mentions of course makes total sense.

Also if you want to combine a list of items that can be navigated to and checked/unchecked in the same list (the use case I am just solving and why I found this topic via Google).

So thanks @mthomka - nice solution for this problem.

1 Like

I guess in that situation I don’t think of the label as being a separate entity, but rather part of the input (checkbox), which is why I consider having the label respond disparately confusing. If a text-containing element is to be considered a distinct interactable object, I would want it to give visual indication to that effect by having it look buttony.

1 Like

Hi,
on Ionic4 this solution doesn’t work.

I’ve tried this:

<ion-item class="terms">
	<ion-label color="primary" (click)="openTerms($event)">{{ 'I accept terms and conditions' | translate }}
	</ion-label>
	<ion-checkbox mode="md" color="primary" formControlName="privacy"></ion-checkbox>
</ion-item>
  openTerms(e) {
    e.preventDefault();
    alert('terms');
  }
ion-checkbox .item-cover{
  display:none;
}

But the label still acts on the checkbox without calling the function.
Is there a new method for doing this on Ionic4?

Thank you

cld

Hi
How did it go ? did you found a solution yet ?

I use Ionic 4 and this did work for me:
(note also, not sure if its important for you to click specific on the label, but I disable the checkbox to prevent activate when click on it, hope that helped)


       <ion-item lines="full">
          <ion-label >{{ confirmTitle }}</ion-label>
          <ion-checkbox slot="start" [checked]="isConfirmation" (click)="chooseConfirmationTitle($event)"></ion-checkbox>
        </ion-item>

and

  private chooseConfirmationTitle(ev: Event) {

    console.log("choose confirm");
   
      ev.preventDefault();
      ev.stopImmediatePropagation();
      ev.cancelBubble = true;
      ev.stopPropagation();

      // Doing other stuff here to control if checkbox should be checked or not!, or just let it be empty!

      return (false);   // you not have to return false , depends of what you doing above like using alertController etc
  }  

Now I could control isConfirmation further.
That should work if you using the same settings I have , here it is:

  Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 6 other plugins)

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.2
   NodeJS     : v11.6.0 (/usr/local/bin/node)
   npm        : 6.7.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.2 Build version 9C40b
1 Like