CODEWITHSUNDEEP
javascriptjquery-mobile
AdilYalcin
AdilYalcin

Reputation: 1177

Controlling multiple checkboxes dynamically in JQuery Mobile

I have a problem implementing a control which can update a group of checkbox states (defined using JQueryMobile framework) multiple times.

The very simple playground code is here: http://jsfiddle.net/XR44Q/3/ (using JQuery 1.9.1 and JQueryMobile 1.3.0, 26 lines of html+javascript code) Actually,the problem is simpler shown than explained. Play with the group control checkbox and see how grouped boxes stop responding after two clicks to the group control. The code and idea is so simple that it should just work:)

The code from jsfiddle is here for future reference:

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");
  });
});

Checkboxes can be updated correctly in the first two changes. So, starting with unchecked state, the control can convert all boxes to checked, and then convert them back to unchecked. However, at this point, the control can no longer select any box.

Individual checkboxes can still be controlled by user clicking on them at this state. If the checkboxes are modified by the user, running checkbox control will have no effect if it tries to select them, and will deselect all boxes correctly if it tries to deselect them. So, the problem appears only when the control tries to select the group of checkboxes after modifying them twice.

If you inspect the page dom and properties, you can see input element generated by JQueryMobile is correctly updated following control events, but 'data-icon' attribute of still remains 'checkbox-off' when it should convert to 'checkbox-on'. A user click on the checkbox updates this attribute correctly, so the problem is actually understanding why 'data-icon' property is not correctly managed by jquery mobile.

Thanks for the feedback!

Upvotes: 1

Views: 1594

Answers (2)

Ben Barden
Ben Barden

Reputation: 2111

It starts with no "checked" attribute. The first time it is checked, it gains a checked attribute of true. The second time, it changes to a checked attribute of false - but it still has a checked attribute, so it keeps trying to change it to false after that point. You need to evaluate based on something other than the existence of the checked attribute.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You should use prop instead of attr:

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

Working demo: http://jsfiddle.net/XR44Q/4/

Take a look at this thread about the differences between attributes and properties.

Upvotes: 2

Related Questions