How to toggle checkbox in jQuery mobile listview

Question

I got stuck with toggling checkboxes within a listview in jQuery Mobile. The checkboxes can not be toggled when I click on the checkbox itself, but it works when I click on the row using the following code-snippet:

jQuery snippet

$('#components a.ui-btn').click(function() {
    var checkbox = $(this).find('input[type="checkbox"]');
    checkbox.prop("checked", !checkbox.prop("checked"));
});

HTML snippet

<div data-role="content">
  <ul id="components" data-role="listview">
    <li>
      <a class="ui-btn">
        <input name="checkbox-0" id="checkbox-0" type="checkbox"/>
        Some random text
      </a>
    </li>
  </ul>
</div>

I prepared a jsFiddle to demonstrate my problem. Furthermore, I added a screenshot below illustrating the problem. The checkbox is even not clickable, if I do not use any jQuery code, so I expect the checkbox is not toggling twice. I would appreciate any help!

Answer 1

Here is a DEMO

Make sure the checkboxes are not inside an anchor tag. You can apply data-role="none" to stop jQM from styling the checkboxes:

<ul id="components" data-role="listview">
    <li>
        <label>
            <input name="checkbox-0" id="checkbox-0" type="checkbox" data-role="none" />Some random text #1</label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="checkbox-0" data-inline="true" data-role="none" />Some random text #2</label>
    </li>
</ul>

A second option is a vertical controlgroup:

<fieldset data-role="controlgroup">
    <legend>Vertical:</legend>
    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
    <label for="checkbox-v-2a">One</label>
    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
    <label for="checkbox-v-2b">Two</label>
    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
    <label for="checkbox-v-2c">Three</label>
</fieldset>