How to make work a button inside checkbox?

ionic-v1
1

Hi! Is there a posibility that the button in ion-list to work? If I press on it, I only check/uncheck the checkbox.So what I want to happen is to execute function() if I press the button.

<ion-list class="list">
  <ion-item class="item item-checkbox item-button-right">
    <label class="checkbox">
      <input type="checkbox" ng-model="item.checked">
    </label>
    Some text . . .
    <button class="button button-positive" ng-click="function()">
      <i class="icon ion-ios7-telephone"></i>
    </button>
  </ion-item>
</ion-list>
2

The problem is the checkbox label is taking up the entire width of the item and is on top of the button. If you change the z-index of the button to be larger than the checkbox, you will be able to click on the button. This is a dirty way, but Iā€™m not sure of the correct way. Codepen

3 Likes