Is the a common way to disable/enable jQuery Mobile inputs?

Question

I have an edit form filled with jQuery Mobile inputs like Text-Inputs, Sliders, Checkboxes and Buttons. When the form first shows, the content (Model) to be edited is fetched.

Before I start fetching, I disable all form elements to prevent the user from doing anything while the content (Model) is being fetched. Only the cancel button should work. "Disabled" means greyed out and not clickable for me.

After the form has finished loading, I enable the form elements again.

Currently, I can only do this by selecting each input type by itself.

//These inputs work with .prop("disable", "true")
//#save is an <button type="submit">
var normalInputs = $("input[type='text'], #save");
//JQM converts <input type="range"> to this
var sliders = $("input[data-type='slider']");
var checkboxes = $("input[type='checkbox']");

normalInputs.prop("disabled", "true");
sliders.slider("disable").slider("refresh");
checkboxes.checkboxradio("disable").checkboxradio("refresh");

For enabling, I even have to call the slider() and checkboxradio() initialization methods because I get an error otherwise (cannot call methods of xxx prior to initialization. attempted to call method enable)

Is there a method to correctly disable all of the jQuery Mobile inputs by using only one selector? A common way to disable/enable inputs?

Answer 1

You can use ui-state-disabled class to disable any element. This class is added by jQM to disabled with disabled="disabled" attribute.

It can be added to form.

$("#form").addClass("ui-state-disabled");

By element, i.e. input, it should be added to parent div as input are wrapped in div upon creation.

$("input").closest("div").addClass("ui-state-disabled");

Demo