禁用 jQuery 移动按钮

我正在尝试禁用此按钮

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

单击事件不应触发，并且按钮 UI 还应反映按钮禁用状态。

我尝试过以下方法

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

似乎没有人能够同时解决这两个问题。

工作示例：http://jsfiddle.net/Gajotres/YFMsR/ http://jsfiddle.net/Gajotres/YFMsR/

不幸的是，只有 INPUT 按钮可以被禁用button('disable')所以你需要像这样模拟它：

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

Class ui-disabled是一个用于禁用外观的 jQuery Mobile 类。

完整示例：

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

如果您想了解更多信息，请看一下这个article http://www.gajotres.net/enable-disable-jquery-mobile-button/，您会发现该主题有更详细的描述。