禁用jQuery移动按钮 [英] Disable jQuery mobile button

问题描述

我正在尝试禁用此按钮

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

不应触发click事件，并且按钮UI也应反映按钮禁用状态.

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

我尝试了以下

$("#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.

推荐答案

工作示例: http://jsfiddle.净/Gajotres/YFMsR/

不幸的是，只能使用 button('disable') 禁用INPUT按钮，因此您需要像这样模拟它:

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 是用于禁用外观的jQuery Mobile类.

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

完整示例:

$(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 ，您会发现该主题有更多详细的描述.

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

这篇关于禁用jQuery移动按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！