如何在jQuery Mobile中禁用链接按钮？

Question

我有一个jQuery Mobile Beta 1网站,带有jQuery 1.6.1链接按钮,如下所示:

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

在document.ready中我设置了click事件:

$('#subselection').livequery("click", function(){
  alert('test');
});

我想禁用这个"链接按钮",我试过了

$('#subselection').button('disable')

并且该命令设置按钮样式,就像它被禁用但单击事件有效.

我也试过了

$('#subselection').prop('disabled', true);

和$('#subselection').prop('disabled'); 给出了真实,但没有禁用.

有人有个好主意.

Answer 1

链接按钮示例:

• http://jsfiddle.net/gRLYQ/6/

JS

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

注意: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

像按钮一样的链接具有与下面真正的基于表单的按钮相同的可视选项,但是有一些重要的区别.基于链接的按钮不是按钮插件的一部分,只是使用底层的buttonMarkup插件生成按钮样式,因此不支持表单按钮方法(启用,禁用,刷新).如果您需要禁用基于链接的按钮(或任何元素),则可以使用JavaScript自行应用已禁用的ui-disabled类来实现相同的效果.

Answer 2

该a元素没有属性disabled.因此,定义一个不会影响您可能附加到它的任何事件处理程序.

示例:http://jsfiddle.net/niklasvh/n2eYS/

有关可用属性的列表,请查看HTML 5参考.

要解决您的问题,您可以改为例如在元素中指定disabledas data:

$('#subselection').data('disabled',true);

然后在你的事件中检查它的集合:

if (!$(this).data('disabled'))

例如:http://jsfiddle.net/niklasvh/n2eYS/5/

Answer 3

在这种情况下不需要jquery/javascript.只需添加一个'ui-disabled'类.

例如:

<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

多数民众赞成我的工作,这对我有用;)