使用jQuery禁用超链接

Question

<a href="gohere.aspx" class="my-link">Click me</a>

我做到了

$('.my-link').attr('disabled', true);

但它不起作用

有没有一种简单的方法来使用jquery禁用超链接？删除href？我宁愿不吝啬href.因此,如果我可以在不删除href的情况下执行此操作,那就太棒了.

Answer 1

您可以绑定返回false的单击处理程序:

$('.my-link').click(function () {return false;});

要再次重新启用它,请取消绑定处理程序:

$('.my-link').unbind('click');

请注意,disabled这不起作用,因为它仅用于表单输入.

jQuery已经预料到了这一点,提供了jQuery 1.4.3的快捷方式:

$('.my-link').bind('click', false);

并解除绑定/重新启用:

$('.my-link').unbind('click', false);

Answer 2

我知道这是一个老问题,但它似乎仍未得到解决.遵循我的解决方案......

只需添加此全局处理程序:

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

这是一个快速演示:http://jsbin.com/akihik/3

你甚至可以添加一些css来为具有disabled属性的所有链接提供不同的样式.

例如

a[disabled]
{
    color: grey; 
}

无论如何,似乎disabled属性对a标签无效.如果您更喜欢遵循w3c规范,则可以轻松采用符合html5的data-disabled属性.在这种情况下,您必须修改以前的代码段并使用$(this).data('disabled').

Answer 3

删除href属性肯定似乎要走了.如果由于某种原因你以后需要它,我会将它存储在另一个属性中,例如

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

这是唯一的方法,它可以使链接显示为禁用,而无需编写自定义CSS.只需将单击处理程序绑定为false,就会使链接看起来像普通链接,但点击它时不会发生任何事情,这可能会让用户感到困惑.如果你要去点击处理程序路由,我至少还会.addClass("link-disabled")编写一些CSS,使得与该类的链接看起来像普通文本.

Answer 4

$('.my-link').click(function(e) { e.preventDefault(); }); 

你可以使用:

$('.my-link').click(function(e) { return false; }); 

但我不喜欢自己使用它,因为它更加神秘,即使它在很多jQuery代码中被广泛使用.

Answer 5

在pointer-events支持(caniuse.com)时,CSS属性有点缺乏,但它非常简洁:

.my-link { pointer-events: none; }