Question

我有一个带有jQuery 1.6.1链接按钮的jQuery Mobile Beta 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

类似按钮的链接具有与true相同的所有可视选项下面是基于表单的按钮，但有一些重要的区别。基于链接的按钮不是按钮插件的一部分，只是使用底层的buttonMarkup插件生成按钮样式不支持表单按钮方法（启用，禁用，刷新）。如果你需要禁用基于链接的按钮（或任何元素），那就是可以自己应用残疾人ui-disabled JavaScript实现同样的效果。

Answer 2

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

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

有关可用属性的列表，请查看HTML 5 reference。

要解决您的问题，您可以改为将disabled分配为元素中的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>

这就是我的工作，它对我有用;）

Answer 4

尝试使用

$('#subselection').button().button('disable'); //disable in JQM

$('#subselection').button().button('enable'); //enable in JQM

这似乎在视觉上可以显示禁用/启用样式...但是“按钮”仍然是可点击的（所以要小心！：P）

Answer 5

我知道已有一个已接受的答案，但我认为这个答案更容易理解。只需让click函数返回false。

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

<script>
$('#subselection').click(function() {
    alert("do some code here");
    return false;
});
</script>

Answer 6

您也可以直接使用具有正确禁用功能的按钮标记/窗口小部件<button>TEST</button>。如果你只是用它来捕捉一个事件并运行一些JavaScript，不确定使用链接会有什么好处。

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

6 个答案: