Checkbox not available to check.. help!

Hello again!

i have a problem… i cant check my checkbox … after click on it, nothing happens… but i dont know why… anyone an idea??

{{#each friend in friends_list}}
    <a {{bind-attr}} {{action "toggleFavourite" friend}}>
        <p class="friendname">{{}}</p>
         {{input type="checkbox" name="isFavourite" checked=friend.favourite}}
         <img {{bind-attr src=friend.picture}} />
         <p class="friendId">Level {{friend.u_id}}</p>

but if i click the a-tag, img-tag or p-tag the checkbox will be checked… :frowning:

nice ragards Avi

The problem is that you have a click action registered on the <a> tag, so clicking on the checkbox will toggle the favourite through it’s own handlers, then the event is propagated up to the parent <a> tag which then toggles it back again.

You have two options:

  1. Create a non-propagating {{checkbox}} input and use that (see issue here
  2. Re-structure your code so that you are not nesting elements with click handlers

thanks for your answer lookingsideways

the first option i dont really understand… :confused: can you explain me what’s a non-propagating input? and the second is not possible for my code…

This is the example provided in the JSBin from the linked github issue:

App.ExtendedCheckbox = Em.Checkbox.extend({
    click: function(event) {

Obviously this is in the old global-style and would need updating for modern Ember but I hope it illustrates the necessary workaround - replace your {{input type="checkbox"}} component with a similar component that stops the click event from propagating to parent inputs the same as you would with normal jQuery.

For anyone looking for this issue, it was resolved almost one year ago. You just need to add preventDefault=false property to the parent action.

1 Like