如何在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 事件中，我设置了点击事件：

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

我想要禁用这个“链接按钮”，我已经尝试过了

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

那个命令设置按钮的样式，就像它被禁用了一样，但点击事件仍然有效。

我也尝试过

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

执行 $('#subselection').prop('disabled'); 返回 true 但是它并没有被禁用。

有人提出了一个好的想法。

- RickardP

---

你应该更新你的另一个问题 https://dev59.com/dmw15IYBdhLWcg3wuuGn ，因为它与此相关，人们已经在那里帮助你了。 - lancscoder

你可以创建两个按钮，一个用于禁用，另一个用于激活。同时，你也可以使用JavaScript来附加或分离onclick事件。 - Asad Rasheed

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自己应用disabled类ui-disabled来实现相同的效果。

- Phill Pafford

---

这个选项实际上比当前被接受的答案（Niklas的答案）更好，因为按钮看起来实际上是禁用的，而jQuery Mobile会自动忽略来自具有“ui-disabled”类的按钮的点击。这让人想知道为什么jQM开发人员没有采取额外的、明显很小的最后一步，简单地为基于链接的按钮提供一些启用/禁用方法。 - Haroldo_OK

@Haroldo_OK 谢谢！我认为jQM在1.1.0版本中提供了更好的东西 http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-methods.html - Phill Pafford

Answer 2

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

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

要查看可用属性的列表，请参阅HTML 5 参考文档。

要解决您的问题，您可以将disabled分配为元素中的data，例如：

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

然后在您的事件中检查是否已设置：

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

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

- Niklas

---

看起来很不错，我打算在我的项目中试一下，谢谢！ - RickardP

谢谢，这确实帮了我。因为我在禁用链接时遇到了一些奇怪的问题，例如 $('a').click(function (e){e.preventDefault();});，然后再使用 $('a').click(function (e){ //do old stuff again }); 启用。重新实现点击处理程序后，“旧操作”似乎陷入了无限循环。 - Dmytro

Answer 3

在这种情况下，不需要使用jquery/javascript。只需添加“ui-disabled”类即可。

例如：

```html

内容

```

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

这就是我所做的，对我很有效 ;)

- Gilly

---

到目前为止，对我来说最好的选择，因为它可以解决按钮样式问题并影响操作。 - xgretsch

Answer 4

尝试使用

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

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

这似乎可以通过视觉方式来显示禁用/启用样式......然而，该“按钮”仍然可点击（所以要小心！:P）

- Erik Yuzwa

Answer 5

我知道已经有一个被接受的答案，但是我认为这个答案更容易理解。只需使点击功能返回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>

- Richard

Answer 6

你也可以直接使用按钮标签或者小部件 <button>TEST</button>，它有正确的禁用功能。如果你只是用它来捕获事件并运行一些 JavaScript，不确定使用链接会有什么优势。

- Danny C