如何在 jQuery 移动列表视图中切换复选框

Posted 2023-05-09

【中文标题】如何在 jQuery 移动列表视图中切换复选框

【英文标题】：How to toggle checkbox in jQuery mobile listview

【发布时间】：2014-05-12 18:45:26

【问题描述】：

我在 jQuery Mobile 的 listview 中切换 checkboxes 时遇到了困难。当我单击复选框本身时，无法切换复选框，但是当我使用以下代码-sn-p 单击行时，它可以工作：

jQuery sn-p

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

html sn-p

<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 代码，复选框甚至不可点击，所以我希望复选框不会切换两次。我将不胜感激！

【问题讨论】：

首先，在锚标签内有一个复选框是没有意义的。您只是在寻找复选框列表jsfiddle.net/ezanker/rautJ/2，还是同时需要复选框和锚点？ jsfiddle.net/ezanker/Xf8QT

@ezanker 你的第一个小提琴是要走的路。但是，我希望拥有列表视图的外观。意思是，我需要相同的边距/填充，没有圆角等。你知道 jQuery 类来获得相同的外观吗？

可以添加data-role="none"，也可以使用垂直控制组。这两个例子都在这个小提琴中：jsfiddle.net/ezanker/rautJ/7

我已将class="ui-btn" style="margin-bottom: 0;" 添加到所有label 以获得预期的外观和感觉。请发表您的评论作为答案，我会除外。 data-role="none" 对我不起作用，因为我不止一个复选框和一个连续的纯文本。

@ezanker 请张贴您的 jsFiddle 示例作为答案，我会排除它

【参考方案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>