禁用Chrome/WebKit/Safari中的锚点

Question

Consider the following code:

$("a").attr("disabled", "disabled");

在IE和FF中，这将使锚点无法点击，但在基于WebKit的浏览器（Google Chrome和Safari）中，这不起作用。disabled属性的好处在于它很容易被移除，不会影响href和onclick属性。

你有什么关于如何获得所需结果的建议吗？答案必须是：

- 易于恢复，因为我想在进行AJAX调用时禁用表单输入控件。 - 必须在IE、FF和WebKit中工作。

- Stefan Rusek

Answer 1

我假设您已经将onclick事件处理程序绑定到这些锚元素。只需让您的事件处理程序检查“disabled”属性，并在其设置时取消事件。您的事件处理程序应该如下所示：

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

您可以设置样式表规则来更改光标。

a[disabled=disabled] { cursor: wait; }

编辑 - 根据评论建议简化了“禁用”检查。

- Neall

---

禁用表单函数() { $（“input，button，textarea，a”）.attr（“disabled”，“disabled”）.css（“cursor”，“wait”）; } 启用表单函数() { $（“input，button，textarea，a”）.not（“.disabled”）.removeAttr（“disabled”）.css（“cursor”，“”）; } - Stefan Rusek

我刚刚粘贴了我正在使用的disableForms和enableForms函数。感谢您的建议。 - Stefan Rusek

如果(this.disabled == "disabled")，将会更快。 - Sugendran

实际上，我认为应该是if（this.disabled）- 在编写评论之前我真的应该检查一下。 - Sugendran

我使用了if(this.disabled)。我没有足够的声望来编辑帖子，否则我会在Neall的帖子中添加一些内容。 - Stefan Rusek

Answer 2

我需要在一个有很多锚点的网站中修复这种根据其他条件启用/禁用此属性的行为。也许不是最理想的方法，但在这种情况下，如果你不想逐个修复每个锚点的代码，那么这将为所有锚点解决问题：

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

并且：

a[disabled] {
    color: gray;
    text-decoration: none;
}

- hernant

---

哇，这太棒了，应该标记为最佳答案！为什么没有人点赞呢？！我已经开始修改当前的答案来做你正在做的事情了，一开始并没有看到那个0赞的答案！但是为什么你的CSS选择器不是a[disabled=disabled]，而且为什么不在你的jQuery中使用相同的选择器呢？ - John Zabroski

我花了一分钟才解密splice + pop这行代码。聪明。我喜欢它的效果，即在删除最后一个元素的同时将其添加到“堆栈”的前面。 - beauXjames