使用jQuery禁用超链接

问题描述 投票:59回答:11
<a href="gohere.aspx" class="my-link">Click me</a>

我做到了

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

但它不起作用

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

jquery disable-link
11个回答
117
投票

您可以绑定返回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);

0
投票

这也很有效。简单,精简,并且不需要使用jQuery。

<a href="javascript:void(0)">Link</a>

-2
投票

尝试:

$(this).prop( "disabled", true );

33
投票

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

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

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

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

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

e.g

a[disabled]
{
    color: grey; 
}

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


10
投票

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

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

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


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

你可以使用:

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

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


7
投票

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

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

4
投票
function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

2
投票

disabled属性对我认为的所有HTML元素都无效,请参阅MSDN article。那个和残疾人的正确值只是“禁用”。最好的方法是绑定一个返回false的click函数。


2
投票

附加一个包含指针事件的类:非

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');

1
投票

下面将用它的文字替换链接

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

编辑:

上面给出的代码将使用仅包含文本的超链接,它不适用于图像。当我们用图像链接尝试它时,它不会显示任何图像。

要使此代码与图像链接兼容,以下工作正常

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

解释:在上面给出的代码片段中,在第一个片段中,我们仅用它的图像替换所有图像链接。之后我们用它的文本替换文本链接。

© www.soinside.com 2019 - 2024. All rights reserved.