3

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

Anton Belev
  • 11,963
  • 22
  • 70
  • 111
  • 1
    Why are you binding `bindRowClick();` to `pagecreate`? plus, to refresh checkbox, you need only `.checkboxradio('refresh')` **not** `.checkbox().checkboxradio('refresh')`. – Omar Jul 12 '13 at 10:38
  • Both `pageinit` and pagecreate` yield the same result. About using `.checkboxradio().checkboxradio('refresh');` instead of `.checkboxradio('refresh');` the reason is that if you use only `.checkboxradio('refresh');` there is an error "Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'" – Anton Belev Jul 12 '13 at 10:48
  • 1
    To over come this problem, check this answer, it's a timing problem http://stackoverflow.com/a/17009087/1771795 Another issue, you better use `.prop('checked', true)` instead of `.attr('checked', true)` – Omar Jul 12 '13 at 10:51
  • 1
    Wow ... with .prop is working. Thank you very much!! Can you please add your comment as an answer. :) – Anton Belev Jul 12 '13 at 10:57
  • I'm glad it worked for you :) – Omar Jul 12 '13 at 11:01
  • 1
    I've also binding the function to `pageinit` now. – Anton Belev Jul 12 '13 at 11:04
  • Yea, it's better, good luck :) – Omar Jul 12 '13 at 11:06

1 Answers1

15

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

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112