如何使用jQuery启用或禁用锚点？

Question

如何使用jQuery启用或禁用锚点？

- Senthil Kumar Bhaskaran

---

谢谢您的所有回答，但仍然无法正常工作，所以请您使用document.ready函数使其正常工作。 - Senthil Kumar Bhaskaran

如果您发布出现问题的代码片段，可能会有所帮助。 - Hooray Im Helping

实际上我的编码是用Rails完成的，我的编码是：<%= foo.add_associated_link('添加电子邮件', @project.email.build) %>当我在浏览器中渲染它时，我可以看到电子邮件，但我无法禁用它即使我尝试使用e.preventDefault()这样的编码，也没有结果。 - Senthil Kumar Bhaskaran

Answer 1

为了防止锚点遵循指定的 href，我建议使用 preventDefault() 方法： preventDefault()。

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

参见：

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

此外，在SO上还可以查看此前的问题：

jQuery disable a link

- karim79

---

我尝试使用这些“attr”，但它只在表单元素上起作用，而不是锚标签上。 - Senthil Kumar Bhaskaran

@senthil - preventDefault 被认为是这样做的“正确”方式，请参阅我的编辑（链接到另一个问答）。 - karim79

实际上，我的编码是在Rails中的，我的编码是<%= foo.add_associated_link('Add email', @project.email.build) %>。当我将其呈现到浏览器中时，我可以看到电子邮件，但即使我尝试使用e.preventDefault()等编码来禁用它也无效。 - Senthil Kumar Bhaskaran

如何反转 $('a.something').on("click", function (e) { e.preventDefault(); });？ - Incerteza

不同意，请使用CSS的“pointer-events：none;”代替，就像其他答案中一样。 - vitrilo

我们如何再次启用它？ - mapmalith

Answer 2

我目前正在开发的应用程序使用CSS样式与JavaScript相结合来实现。

a.disabled { color:gray; }

然后每当我想要禁用一个链接时，我调用以下代码：

$('thelink').addClass('disabled');

然后，在'thelink' a标签的点击处理程序中，我总是首先运行一个检查。

if ($('thelink').hasClass('disabled')) return;

- AgileJon

---

那最后一行不应该写成"return false;"吗？ - Prestaul

不错的想法，Prestaul。当与<a>标签结合使用时，我正在使用以下内容：<a href="whatever" onclick="return disableLink(this)"> .. 其次：function disableLink(node) {if (dojo.hasClass(node, 'disabled') return false; dojo.addClass(node, 'disabled'); return true;} .. 这样可以允许链接被点击一次并执行操作（返回true），之后它不再允许执行操作（返回false）。 - Neek

请注意，在处理程序中，您可能应该使用$(this)而不是$("thelink")，因为那样可能会改变或用户可以轻松地复制/粘贴代码。 - Alexis Wilke

建议您在禁用样式中添加“cursor: default”。 - Stuart Hallows

Answer 3

我找到了一个更好的答案在这里

看起来是这样的：

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

启用需要设置 href 属性。

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

这将使锚点元素看起来像普通文本，反之亦然。

- Michael Meadows

Answer 4

所选答案不好。

使用 CSS 样式 pointer-events。（如 Rashad Annara 建议）

请参考 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。它在大多数浏览器中都受支持。

如果您有以下全局 CSS 规则，则简单地添加 "disabled" 属性到锚点即可完成任务：

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

- vitrilo

---

同时，使用pointer-events属性时，您无需包含:hover状态，因为它是一个指针事件。您只需要包含a[disabled]选择器即可。 - Larry Dukek

Answer 5

我认为更好的解决方案是在锚点上设置已禁用的数据属性并在单击时进行检查。这样，我们可以暂时禁用锚点，直到例如javascript完成ajax调用或某些计算。如果我们不禁用它，那么我们可能会快速点击它几次，这是不希望出现的...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

我制作了一个jsfiddle的例子：http://jsfiddle.net/wgZ59/76/

- Michal B.

Answer 6

$("a").click(function(){
                alert('disabled');
                return false;

}); 

- AlexC

Answer 7

尝试以下几行代码

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

因为即使你禁用了<a>标签，href仍然会起作用，所以你必须同时删除href。

当你想启用时，请尝试以下几行：

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

- Victor AJ

---

这正是我在使用JQuery与ASP.net MVC ActionLink时所需要的。谢谢！ - eaglei22

Answer 8

$('#divID').addClass('disabledAnchor');

在 CSS 文件中

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

- Rashad Valliyengal

Answer 9

这很简单，只需要写上 return false; 就可以了。

例如：

jQuery("li a:eq(0)").click(function(){
   return false;
})

或者

jQuery("#menu a").click(function(){
   return false;
})

- kim edgard

Answer 10

$("a").click(function(event) {
  event.preventDefault();
});

如果调用此方法，事件的默认操作将不会被触发。

- Mohssen Beiranvand