使用 jQuery 禁用超链接

Posted 2023-03-05

【中文标题】使用 jQuery 禁用超链接

【英文标题】：disable a hyperlink using jQuery

【发布时间】：2011-07-02 10:01:26

【问题描述】：

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

我做到了

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

但是没用

有没有一种简单的方法可以使用 jquery 禁用超链接？删除href？我宁愿不摆弄href。因此，如果我可以在不删除 href 的情况下做到这一点，那就太好了。

【问题讨论】：

How do I dynamically enable/disable links with jQuery?的可能重复

【参考方案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);

【讨论】：

对于 1.4.3 或更高版本，您可以使用 $('.my-link').bind('click',false); 将其缩短一点。

从 jQuery 1.7 开始，bind() 和 unbind() 已替换为 on() 和 off()。请参阅docs 了解更多信息。

this 帖子有使用引导程序的最简单方法，希望对您有所帮助。

【参考方案2】：

删除href 属性显然是可行的方法。如果由于某种原因您以后需要它，我会将其存储在另一个属性中，例如

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

这是唯一可以在不编写自定义 CSS 的情况下使链接也显示为禁用的方法。只需将点击处理程序绑定到 false 将使链接看起来像一个普通链接，但点击它时不会发生任何事情，这可能会让用户感到困惑。如果您打算使用点击处理程序路线，我至少还会 .addClass("link-disabled") 并编写一些 CSS 使该类的链接看起来像普通文本。

【讨论】：

删除href 也会打乱搜索引擎优化排名。离开属性并禁用它会让机器人意识到它是一个链接。

【参考方案3】：

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

你可以使用：

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

但我不喜欢自己使用它，因为它比较神秘，尽管它在许多 jQuery 代码中被广泛使用。

【参考方案4】：

disabled 属性并非对我认为的所有 html 元素都有效，请参阅MSDN article。这和禁用的正确值只是“禁用”。您最好的方法是绑定一个返回 false 的点击函数。

【讨论】：

这是我第一次看到有人参考MSDN，W3C链接好吗？！

@Zappa，w3School 与 W3C 无关。 W3C 是 www.w3.org

【参考方案5】：

我知道这是一个老问题，但似乎仍未解决。按照我的解决方案...

只需添加这个全局处理程序：

$('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 属性。在这种情况下你必须修改之前的 sn-p 并使用$(this).data('disabled')。

【讨论】：

我认为这实际上应该是： if ($(this).attr('disabled')) e.stopImmediatePropagation();

另外，为了确保动态添加的锚点也被禁用，完整的代码应该是： $("body").on("click", "a", function (e) if ( $(this).attr('disabled')) e.stopImmediatePropagation(); );

（5 分钟后无法编辑评论）。我忘了补充：e.preventDefault();

【参考方案6】：

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

$('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());
);

解释：在上面给出的代码 sn-ps 中，在第一个 sn-p 中，我们仅将所有图像链接替换为它的图像。之后我们用它的文本替换文本链接。

【讨论】：

非常感谢！你只是让我不必编辑 2400 块文本......或学习正则表达式（谁想这样做，对吧？）。

如何将链接设置回默认值？假设我用 $(this).replaceWith($(this).text()); 禁用了所有链接但是如何将其设置为启用的默认值？

【参考方案7】：

pointer-events CSS 属性在支持方面有点欠缺 (caniuse.com)，但非常简洁：

.my-link  pointer-events: none;  

【讨论】：

但这也可以禁用链接所做的任何其他工作。例如，悬停不起作用。

【参考方案8】：

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;

【参考方案9】：

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

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

【参考方案10】：

试试：

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

【讨论】：

“已禁用”在链接上不可用。可以在 IE 中工作，但不能在其他浏览器中工作。

【参考方案11】：

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

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


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