1

我在实现一个可以多次更新一组复选框状态（使用 JQueryMobile 框架定义）的控件时遇到问题。

非常简单的操场代码在这里：http: //jsfiddle.net/XR44Q/3/（使用JQuery 1.9.1和JQueryMobile 1.3.0，26行html+javascript代码）实际上，问题比解释简单。使用组控制复选框，查看在两次单击组控制后分组框如何停止响应。代码和想法非常简单，它应该可以工作:)

来自 jsfiddle 的代码在这里供将来参考：

HTML：

<form>
  <input id="group_control" name="g" type="checkbox" />
  <label for="group_control">Group</label>
  <fieldset data-role="controlgroup" data-type="vertical" class="sub_cat">
    <input id="c01" name="c01" type="checkbox" class="cXX" />
    <label for="c01">A</label>
    <input id="c02" name="c02" type="checkbox" class="cXX" />
    <label for="c02">B</label>
    <input id="c03" name="c03" type="checkbox" class="cXX" />
    <label for="c03">C</label>
  </fieldset>
</form>

Javascript：

$(document).ready(function () {
  $("#group_control").click(function () {
    // the checkbox state can be correctly retrieved
    alert("Group checked? "+$('#group_control').is(':checked'));
    $("INPUT[class='cXX']").attr(
        'checked', $('#group_control').is(':checked')
    ).checkboxradio("refresh");
  });
});

复选框可以在前两个更改中正确更新。因此，从未选中状态开始，控件可以将所有框转换为选中状态，然后将它们转换回未选中状态。但是，此时，控件不能再选择任何框。

在此状态下，用户仍然可以通过单击单个复选框来控制它们。如果复选框被用户修改，如果它试图选择它们，运行复选框控件将不起作用，如果它试图取消选择它们，它将正确取消选择所有框。因此，仅当控件在修改两次后尝试选择复选框组时，才会出现问题。

如果您检查页面 dom 和属性，您可以看到JQueryMobile 生成的输入元素在控制事件之后正确更新，但是当它应该转换为'checkbox-on'时，它的 'data-icon' 属性仍然保持'checkbox-off ' 。用户单击复选框会正确更新此属性，因此问题实际上是理解为什么 jquery mobile 无法正确管理“data-icon”属性。

感谢您的反馈！

4

2 回答 2

2

您应该使用prop而不是attr：

$("#group_control").click(function() {
    //alert("Group checked? "+$('#group_control').is(':checked'));
    $("INPUT[class='cXX']").prop('checked', this.checked).checkboxradio("refresh");
});

工作演示：http: //jsfiddle.net/XR44Q/4/

看看这个线程关于属性和属性之间的差异。

于 2013-04-04T18:55:28.350 回答
0

它以没有“已检查”属性开头。第一次被检查时，它会获得一个检查属性为真。第二次，它更改为 false 的已检查属性 - 但它仍然具有已检查属性，因此在该点之后它一直尝试将其更改为 false。您需要根据检查属性的存在以外的其他内容进行评估。

于 2013-04-04T18:57:05.527 回答