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

Solution

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

Demo

Comments

[Anton Belev]

I've also binding the function to pageinit now.

[Omar]

To over come this problem, check this answer, it's a timing problem stackoverflow.com/a/17009087/1771795 Another issue, you better use .prop('checked', true) instead of .attr('checked', true)

[Anton Belev]

Wow ... with .prop is working. Thank you very much!! Can you please add your comment as an answer. :)

[Omar]

Why are you binding bindRowClick(); to pagecreate? plus, to refresh checkbox, you need only .checkboxradio('refresh') not .checkbox().checkboxradio('refresh').

[Nick B]

$('.selector').checkboxradio().trigger('create') was exactly what I needed. Thanks