Question

我正在尝试停用此按钮

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

似乎没有人同时处理这两个问题。

Answer 1

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

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

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

类 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 ，您会发现此主题更详细地介绍。

Answer 2

您无法自行禁用<a>。

你可以：

使用return false;
将href设置为#。
请改用<input type="button">。

如果你正在使用jQuery ui的按钮小部件，你应该使用它：

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

Docs

Answer 3

试试这个。它禁用导航

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

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

禁用jQuery移动按钮

3 个答案: