CODEWITHSUNDEEP
jqueryjquery-mobile
Baked Inhalf
Baked Inhalf

Reputation: 3735

How to modify a jQuery Mobile page before it's loaded?

I have a single page application in jQuery Mobile 1.4.0, with 4 pages. At start I want some chckboxes to be disabled by default.

This works:

$("#page3 .ui-checkbox").prop("disabled", true);
    $("#page3 .ui-checkbox").addClass("ui-disabled");

html

<div data-role="page" class="page3" id="page3" data-dom-cache="true">

document ready() isn't working... document on "pagecreate" works, but changes to page3 will be applied when navigating to page2....

Update I tried this... seems to work. Is this good/bad ?

$(function()
{
    $(document).on("pagecreate", "#page3", function(e){
         $("#page3 .ui-checkbox").prop("disabled", true);
         $("#page3 .ui-checkbox").addClass("ui-disabled");
    });

Upvotes: 1

Views: 52

Answers (1)

Omar
Omar

Reputation: 31732

To disable/enable checkbox or radio, use .checkboxradio() functions. You dont need to add ui-state-disabled.

$(document).on("pagecreate", "#pageID", function () {
  $(".selector").checkboxradio("disable");
  $(".selector").checkboxradio("enable");
});

Demo

Upvotes: 4

Related Questions