jQuery Mobile how to check if button is disabled?

Question

I disable the button like this on my jQuery Mobile webpage:

$(document).ready(function() {
    $("#deliveryNext").button();
    $("#deliveryNext").button('disable');
});

and i can enable it with

$("#deliveryNext").button('enable');

But how do i check if the button is disabled or enabled?

This command gives "undefined":

$("#deliveryNext").attr('disabled')

Some ideas?

Edit: i find out that $("#deliveryNext").button('disable') only seams to change the style on the button, the clicking works fine after so i need to disable the button some how also.. i tried .attr('disabled', 'disabled') but when i then test .attr('disabled') i get undefined...

Edit2: more about my "real" problem at How to disable a link button in jQuery Mobile?

Solution 1

try :is selector

$("#deliveryNext").is(":disabled")

Solution 2

Use .prop instead:

$('#deliveryNext').prop('disabled')

Solution 3

Faced with the same issue when trying to check if a button is disabled. I've tried a variety of approaches, such as btn.disabled, .is(':disabled'), .attr('disabled'), .prop('disabled'). But no one works for me.

Some, for example .disabled or .is(':disabled') returned undefined and other like .attr('disabled') returned the wrong result - false when the button was actually disabled.

But only one technique works for me: .is('[disabled]') (with square brackets).

So to determine if a button is disabled try this:

$("#myButton").is('[disabled]');

Solution 4

Try

$("#deliveryNext").is(":disabled")

The following code works for me:

<script type="text/javascript">
    $(document).ready(function () {
        $("#testButton").button();
        $("#testButton").button('disable');
        alert($('#testButton').is(':disabled'));
    });
</script>
<p>
    <button id="testButton">Testing</button>
</p>

Solution 5

I had the same problem and I found this is working:

if ($("#deliveryNext").attr('disabled')) {
  // do sth if disabled
} else {
  // do sth if enabled 
}

If this gives you undefined then you can use if condition also.

When you evaluate undefined it will return false.

View more solutions

Comments

[RickardP]

thats gives me the same result, if i writing this in firebug: console.log($('#deliveryNext').prop('disabled')) i getting "undefined"

[RickardP]

Gives me false but the button is disabled with $('#deliveryNext').button('disable')

[lancscoder]

Does the element have the disabled tag when your disable it? (You can check through firebug)

[tponthieux]

Use ".prop('disabled')" instead.

[tponthieux]

Works for me in FireFox.

[Imskull]

If you are using bootstrap, you may need hasClass("disabled") for tag A as well.

[BartoszKP]

@tponthieux Could you elaborate?