21

With HTML a checkbox is created like this:

<form>
   <input type="checkbox" id="category1">Category1<br>
</form>

With javascript we can check the checkbox like this:

$("#category1")[0].checked = true

Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:

<form>
    <label>
        <input name="checkbox-0 " type="checkbox">Check me
    </label>
</form>

Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?

How can I check this checkbox here with Javascript/jQuery?

I tried the code above, but it doesn't seem to work for this checkbox.

3

4 Answers 4

58

You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.

Demo

$('.selector').prop('checked', true).checkboxradio('refresh');

Reference: jQuery Mobile API

7
  • 2
    Perfect answer as always Omar. Thank you very much sir.
    – Jonh Smid
    Jun 10, 2013 at 16:57
  • @JonhSmid Thank you and take it easy buddy :)
    – Omar
    Jun 10, 2013 at 16:58
  • 1
    thankyou! also, why?!?! ah, per the documentation: api.jquerymobile.com/checkboxradio/#method-refresh
    – Jason Wall
    Apr 25, 2016 at 19:21
  • I get the error Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh' even in the linked demo page. See my answer for how I got it working.
    – SharpC
    May 29, 2021 at 9:44
  • @SharpC wrap it in pagecreate event. You're calling refresh before the widget is initialized.
    – Omar
    Jun 1, 2021 at 10:50
4

You can do:

$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked =  $('input[name="checkbox-0"]').prop("checked"); //gets the status
3
  • if i gave an id to the checkbox would that be correct : $(#id_name).prop("checked", true); ?
    – Jonh Smid
    Jun 10, 2013 at 16:03
  • Yes, dont forget the quotes in the selector $("#id_name").prop("checked", true);
    – tymeJV
    Jun 10, 2013 at 16:09
  • 1
    @JonhSmid -- Was unaware, I've updated my answer. Thx for pointing this out!
    – tymeJV
    Jun 10, 2013 at 16:58
2

Straight from the jQ Mobile docs:

$("input[type='checkbox']").attr("checked",true);
1
  • $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); Straight there! Mar 13, 2018 at 3:24
0

With the solution from @Omar I get the error:

Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

I actually had a flipswitch checkbox:

<div class="some-checkbox-area">
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
           data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>

and found the solution was:

$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" ) 

Notes

  • I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
  • If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.