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?

You dont need to refresh when disabling/enabling. The easiest way is to add ui-state-disabled class to input parent div. jsfiddle.net/Palestinian/ZzZ6N — Omar
Thanks, worked perfectly. If this was an answer, I would accept. — Manuel Hoffmann
I'll add an answer with explanation. I'm glad it worked for you. — Omar

Omar Omar · Accepted Answer · 2014-03-03T15:36:54

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

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

1 Answers