Search code examples
javascriptdom-eventsstoppropagation

Prevent checkbox from checking itself

I have some <li> which is styled as a button. 

<li class="button">
   <input type="checkbox" class="checkbox" />
   <span>Text</span>
</li>

As you can see, there is a checkbox inside the li element. I use angular to set checked property of this checkbox as we click li area. It works fine, but I have a problem. When I click the checkbox nothing happens - I know that my Angular code checks the checkbox and after this it unchecks itself.

I tried:

<input type="checkbox" class="checkbox" onclick="event.stopPropagation()" />

But it didn't help... How to "block" checkbox from doing its "check/onlick" event?

Solution

  • return false on checkbox to prevent its default behaviour

    <input type="checkbox" class="checkbox" onclick="return false;" />