JQuery Mobile refreshing checkbox works only once - .checkboxradio('refresh') issue

checkbox, jquery, jquery-mobile, refresh

Solution

Instead of using `.attr()` use `.prop()` and then `.checkboxradio('refresh')`.

Demo

Problem

I ran into a strange problem. I've got a table with a checkbox column. I'm using JQuery Mobile checkboxes. I want a click on a row to be associated with click on the checkbox in this row. JS: ``` $(document).on('pagecreate', function (event) { bindRowClick(); }); function bindRowClick() { $('.productTable').find('tr').click(function () { var chck = $(this).find('td.hyperLink').find('input[type=checkbox]:first'); var chckStatus = chck.is(':checked'); alert("chckStatus 1: " + chckStatus); alert("!chckStatus: " + !chckStatus); chck.attr('checked', !chckStatus).checkboxradio().checkboxradio('refresh'); alert("chckStatus 2: " + chck.is(':checked')); }); } ``` HTML: this is inside `<td class="hyperlink">` ``` <fieldset data-role="controlgroup" id="divCheckbox"> <asp:CheckBox runat="server" ID="checkboxSelect" CssClass="custom chckSelect" meta:resourcekey="checkboxSelectResource1" /> <asp:Label ID="lblForChck" CssClass="lblForChck" AssociatedControlID="checkboxSelect" runat="server" meta:resourcekey="lblForChckResource1" /> </fieldset> ``` What's happening with when I click on row 1 time (checkbox was not selected until now): ``` first alert returns: "chckStatus 1: false" second alert returns: "!chckStatus: true" third alert returns: "chckStatus 2: true" ``` What's happening with when I click on the SAME row 2 time (checkbox was selected previously): ``` first alert returns: "chckStatus 1: true" second alert returns: "!chckStatus: false" third alert returns: "chckStatus 2: false" ``` And now the strange part When I click again on the same row - instead of selecting the checkbox (like the first time) I've got the following result: ``` first alert returns: "chckStatus 1: true" second alert returns: "!chckStatus: false" third alert returns: "chckStatus 2: false" ``` What I found that might be connected to this issue: Previously working ".checkboxradio('refresh')" now broken in a3

Original source