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?

Answer 1

try :is selector

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

Answer 2

Use .prop instead:

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

Answer 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]');

Answer 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>

Answer 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.

Answer 6

Try

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

Answer 7

http://jsfiddle.net/8gfYZ/11/ Check here..

$(function(){

    $('#check').click(function(){
        if( $('#myButton').prop('disabled') ) { 
            alert('disabled'); 
            $('#myButton').prop('disabled',false);
        } 
        else {
            alert('enabled');
            $('#myButton').prop('disabled',true);
        }
    });
});

Answer 8

To see which options have been set on a jQuery UI button use:

$("#deliveryNext").button('option')

To check if it's disabled you can use:

$("#deliveryNext").button('option', 'disabled')

Unfortunately, if the button hasn't been explicitly enabled or disabled before, the above call will just return the button object itself so you'll need to first check to see if the options object contains the 'disabled' property.

So to determine if a button is disabled you can do it like this:

$("#deliveryNext").button('option').disabled != undefined && $("#deliveryNext").button('option', 'disabled')

Answer 9

$('#StartButton:disabled') ..

Then check if it's undefined.

Answer 10

What worked for me was this:

$("#testButton").hasClass('ui-state-disabled')

But I like tomwadley's answer a lot more.

Nevertheless, the is(':disabled') code does also not work for me which should be the best version. Don't know, why it does not work. :-(

Answer 11

You can use jQuery.is() function along with :disabled selector:

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

Answer 12

Try The below one:-

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