Disable jQuery mobile button

问题

I am trying to disable this button

<a  data-role="button" id="next"  data-icon="arrow-r" >Next</a>

The click event should not fire and the button UI should also reflect a button disabled state.

I have tried the following

$("#next").attr('disabled',true);
$("#next").attr("disabled", "disabled");
$("#next").button('disable');
$("#next").button().button('disable');

None seems to deal with the 2 issues at once.

回答1:

Working example: http://jsfiddle.net/Gajotres/YFMsR/

Unfortunately only INPUT button can be disabled with button('disable') so you will need to simulate it like this:

$('#next').prop('disabled', true).addClass('ui-disabled');

Class ui-disabled is a jQuery Mobile class used for disabled look.

Full example:

$(document).on('pagebeforeshow', '#index', function(){ 
    // So we can test if button is disabled or not
    $(document).on('click', '#next', function(){     
        alert('Click event');
    });    
    $('#next').prop('disabled', true).addClass('ui-disabled');
});

If you want to find out more then take a look at this article, you will find this topic described in much more details.

回答2:

You can't disable <a> per se.

You can:

• Cancel the navigation with return false;
• set the href to #.
• Use <input type="button"> instead.

---

If you are using jQuery ui's button widget, you should use this:

$( "#next" ).button( "disable" );

Docs

回答3:

Try this one. It disable navigation

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

   $('button class').css('opacity', '0.3');

来源：https://stackoverflow.com/questions/16855418/disable-jquery-mobile-button