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

Question

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

Answer 1

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

Demo