禁用 jQuery 移动按钮答案

【问题标题】：Disable jQuery mobile button禁用 jQuery 移动按钮
【发布时间】：2013-09-11 06:58:05
【问题描述】：

我正在尝试禁用此按钮

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

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

【问题讨论】：

标签： jquery jquery-mobile

【解决方案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，您会发现该主题的描述更加详细。

【讨论】：

【解决方案2】：

您不能禁用 <a> 本身。

你可以：

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

如果你使用 jQuery ui 的按钮小部件，你应该使用这个：

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

Docs

【讨论】：

使用有效，事件不会触发，但按钮的 UI 不会更新为禁用状态
@KehindeKolexinfosKolade，使用 $('the-selector').attr('disabled', 'disabled') 就可以了。
不，它不会在禁用状态下按下按钮 UI
@KehindeKolexinfosKolade，我们需要更多上下文来了解您的页面中发生了什么，设置一个 jsFiddle 并编辑您的问题，有人会帮助您，我需要离开计算机几个小时，gl。

【解决方案3】：

试试这个。它禁用导航

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

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

【讨论】：