How to enable and disable various components in jQuery Mobile? Following are my tips.

Button

To disable a button, simply add the ‘disabled’ attribute to it:

<button id="btn" type="button" disabled>Button</button>

To disable a button, simply add the ‘disabled’ attribute to it:

$('#btn').button('disable'); // Disable button
$('#btn').button('enable');  // Enable button

The same applies to a submit button. Adding the ‘disabled’ attribute to the submit button disables it.

<input id="submit" type="submit" value="Submit" disabled>

Or we’re able to manipulate the submit button via Javascript:

$('#submit').button('disable'); // Disable submit button
$('#submit').button('enable');  // Enable submit button

As far as link button is concerned, since anchors don’t natively have any disabled state, jQuery Mobile group decides not to support disable and enable anchors like buttons. Therefore, we have to apply ‘ui-disabled’ class to the anchor to achieve the same effect.

<a id="anchor" href="#" data-role="button" class="ui-disabled">Link button</a>

Here’s how to do via Javascript:

$('#anchor').addClass('ui-disabled');     // Disable anchor button
$('#anchor').removeClass('ui-disabled');  // Enable anchor button

Form

It’s extremely easy to disable form components by just adding ‘disabled’ attribute to them.

Cascading Selector

The display looks like below:

Cascading Selector

To implement it via Javascript:

$('#firstname').prop('disabled', true);  // Disable input
$('#firstname').prop('disabled', '');    // Enable input

Or we’re able to disable the entire form by adding ‘ui-disabled’ class to it:

$('form').addClass('ui-disabled');

Through this way, the labels inside the form are dimmed.

Cascading Selector