Disable Buttons in jQuery Mobile

Question

This is for jQuery Mobile. Not all regular jQuery answers will work.

I can't get my buttons to disable in jQuery Mobile.

jQuery Mobile says to use

$('input').button('disable');   

But I get an error message in Firebug:

uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'.

It's in the document ready section of my page so I dont know how it's not initialized yet.

I've tried calling the button directly by its id but that doesn't work.

I've tried:

$('button').attr("disabled", "disabled");

Doesn't work.

I also have a switch command that will enable one button based on what the value is. I've got that part to where its routing to right "case" statements, but the enable/disable buttons thing in jQuery mobile is not working.

code: http://pastebin.com/HGSbpAHQ

Answer 1

UPDATE:

Since this question still gets a lot of hits I'm also adding the current jQM Docs on how to disable the button:

• http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-methods.html

Updated Examples:

enable enable a disabled form button

$('[type="submit"]').button('enable');  

disable disable a form button

$('[type="submit"]').button('disable'); 

refresh update the form button
If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.

$('[type="submit"]').button('refresh');

Original Post Below:

Live Example: http://jsfiddle.net/XRjh2/2/

UPDATE:

Using @naugtur example below: http://jsfiddle.net/XRjh2/16/

UPDATE #2:

Link button example:

• http://jsfiddle.net/gRLYQ/6/

JS

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.