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.

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