Disable Buttons in jQuery Mobile

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

Solution 2:

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

this means that you are trying to call it on an element that is not handled as a button, because no .button method was called on it. Therefore your problem MUST be the selector.

You are selecting all inputs $('input'), so it tries to call the method disable from button widget namespace not only on buttons, but on text inputs too.

$('button').attr("disabled", "disabled"); will not work with jQuery Mobile, because you modify the button that is hiden and replaced by a markup that jQuery Mobile generates.

You HAVE TO use jQueryMobile's method of disabling the button with a correct selector like:

$('div#DT1S input[type=button]').button('disable');

Solution 3:

If I'm reading this question correctly, you may be missing that a jQuery mobile "button" widget is not the same thing as an HTML button element. I think this boils down to you can't call $('input').button('disable') unless you have previously called $('input').button(); to initialize a jQuery Mobile button widget on your input.

Of course, you may not want to be using jQuery button widget functionality, in which case Alexander's answer should set you right.

Solution 4:

What seems to be needed is to actually define the button as a button widget.

I had the same problem (in beta 1)

I did

$("#submitButton").button();

in my window ready handler, after that it worked to do as it is said in the docs, i.e.:

$("#submitButton").button('disable'); 

I guess this has to do with that jqm is converting the markup, but isnt actually instatiating a real button widget for buttons and link buttons.