Disabling JQuery Mobile button with JQuery

Question

this is my JQuery mobile button. This is probably an easy one. Im able to disable a html button but i cant seem to get it with this mark up.

<a href="" data-role="button"  class="answer_but" id="a" data-theme="b" data-answer="1">

This is probably an easy one. Thanks

Answer 1

Disable Buttons in jQuery Mobile

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

UPDATE:

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

You can just set the class to "ui-disabled" for almost any element or button to disable it.

<a data-role="filter-button" data-timeframe="month" class="ui-disabled">Date</a>

Answer 3

Hmmm - Try this (assuming 'a' is the id of your jqm button):

// To disable
$("#a").attr("disabled","disabled");

// and enable
$("#a").attr("disabled","");

Answer 4

So I looked over this and couldn't get this to work either. Then a coworker suggested adding live to a vclick and now it works.

    //Disable Continue Button
        $('#icon-continue').live( 'vclick',function(event){

    var clicked = false;

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