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.

Improve this question
3

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Perfect answer as always Omar. Thank you very much sir.
@JonhSmid Thank you and take it easy buddy :)
thankyou! also, why?!?! ah, per the documentation: api.jquerymobile.com/checkboxradio/#method-refresh
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 wrap it in pagecreate event. You're calling refresh before the widget is initialized.
|
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
Improve this answer

3 Comments

if i gave an id to the checkbox would that be correct : $(#id_name).prop("checked", true); ?
Yes, dont forget the quotes in the selector $("#id_name").prop("checked", true);
@JonhSmid -- Was unaware, I've updated my answer. Thx for pointing this out!
2

Straight from the jQ Mobile docs:

$("input[type='checkbox']").attr("checked",true);
Improve this answer

1 Comment

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); Straight there!
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...
Improve this answer

1 Comment

flipswitch and checkbox are two different widgets. stackoverflow.com/a/21797694/1771795

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.