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

score 5 · Answer 1 · edited May 23 '17 at 12:16

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.

Thanks @phil. yeah it works fine but changing my buttons to the html markup you specified breaks some functionality in my app. Do you have any suggestions as to how i can disable the given button markup? — L-Samuels, May 15 '11 at 21:14

score 2 · Answer 2 · answered Feb 10 '12 at 14:48

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>

answered Feb 10 '12 at 14:48

Tyler Sammy

21
1

score 1 · Answer 3 · answered May 14 '11 at 22:58

1

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

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

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

answered May 14 '11 at 22:58

Jay Are

584
1
5
10

I tried that. Its doesnt seem to work. it works with original buttons but not jquery mobile ones. – L-Samuels May 14 '11 at 23:08

score 0 · Answer 4 · answered Jan 20 '12 at 19:31

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

Disabling JQuery Mobile button with JQuery

4 Answers4