如何在jQuery mobile listview中切换复选框

Question

我遇到了在jQuery Mobile中checkboxes内切换listview的问题。当我单击复选框本身时，无法切换复选框，但是当我使用以下代码片段单击该行时，它会起作用：

jQuery代码段

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

HTML代码段

<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>

我准备了一个jsFiddle来证明我的问题。此外，我在下面添加了一个截图，说明了问题。如果我不使用任何jQuery代码，该复选框甚至不可点击，所以我希望复选框不会切换两次。我将不胜感激任何帮助！

Answer 1

  

这是 DEMO

确保复选框不在锚标记内。您可以应用data-role =“none”来阻止jQM设置复选框样式：

<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>

第二个选项是垂直控制组：

<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>