使用 jQuery 禁用超链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5085584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable a hyperlink using jQuery
提问by sarsnake
<a href="gohere.aspx" class="my-link">Click me</a>
I did
我做了
$('.my-link').attr('disabled', true);
but it didn't work
但它没有用
Is there an easy way to disable the hyperlink using jquery? Remove href? I would rather not fiddle with href. So if I can do it w/o removing href, that would be great.
有没有一种简单的方法可以使用 jquery 禁用超链接？删除href？我宁愿不摆弄href。因此，如果我可以在不删除 href 的情况下做到这一点，那就太好了。
回答by David Tang
You can bind a click handler that returns false:
您可以绑定一个返回 false 的点击处理程序：
$('.my-link').click(function () {return false;});
To re-enable it again, unbind the handler:
要再次重新启用它，请取消绑定处理程序：
$('.my-link').unbind('click');
Note that disableddoesn't work because it is designed for form inputs only.
请注意，disabled这不起作用，因为它仅适用于表单输入。
jQuery has anticipated this already, providing a shortcut as of jQuery 1.4.3:
jQuery 已经预料到了这一点，从 jQuery 1.4.3 开始提供了一个快捷方式：
$('.my-link').bind('click', false);
And to unbind / re-enable:
并取消绑定/重新启用：
$('.my-link').unbind('click', false);
回答by Luciano Mammino
I know it's an old question but it seems unsolved still. Follows my solution...
我知道这是一个老问题，但似乎仍未解决。按照我的解决方案...
Simply add this global handler:
只需添加这个全局处理程序：
$('a').click(function()
{
return ($(this).attr('disabled')) ? false : true;
});
Here's a quick demo: http://jsbin.com/akihik/3
这是一个快速演示：http: //jsbin.com/akihik/3
you can even add a bit of css to give a different style to all the links with the disabled attribute.
您甚至可以添加一些 css 来为所有具有 disabled 属性的链接提供不同的样式。
e.g
例如
a[disabled]
{
color: grey;
}
Anyway it seems that the disabled attribute is not valid for atags. If you prefer to follow the w3c specs you can easily adopt an html5 compliant data-disabledattribute. In this case you have to modify the previous snippet and use $(this).data('disabled').
无论如何，disabled 属性似乎对a标签无效。如果您更喜欢遵循 w3c 规范，您可以轻松采用符合 html5 的data-disabled属性。在这种情况下，您必须修改之前的代码片段并使用$(this).data('disabled').
回答by Riley Dutton
Removing the hrefattribute definitely seems to the way to go. If for some reason you need it later, I would just store it in another attribute, e.g.
删除该href属性似乎是可行的方法。如果由于某种原因你以后需要它，我会把它存储在另一个属性中，例如
$(".my-link").each(function() {
$(this).attr("data-oldhref", $(this).attr("href"));
$(this).removeAttr("href");
});
This is the only way to do it that will make the link appear disabled as well without writing custom CSS. Just binding a click handler to false will make the link appear like a normal link, but nothing will happen when clicking on it, which may be confusing to users. If you are going to go the click handler route, I would at least also .addClass("link-disabled")and write some CSS that makes links with that class appear like normal text.
这是在不编写自定义 CSS 的情况下使链接显示为禁用的唯一方法。只需将点击处理程序绑定到 false 将使链接看起来像一个普通链接，但点击它时不会发生任何事情，这可能会让用户感到困惑。如果您打算使用单击处理程序路由，我至少也会.addClass("link-disabled")编写一些 CSS，使与该类的链接看起来像普通文本。
回答by Neil
$('.my-link').click(function(e) { e.preventDefault(); });
You could use:
你可以使用：
$('.my-link').click(function(e) { return false; });
But I don't like to use this myself as it is more cryptic, even though it is used extensively throughout much jQuery code.
但我不喜欢自己使用它，因为它更神秘，即使它在很多 jQuery 代码中被广泛使用。
回答by tiffon
The pointer-eventsCSS property is a little lacking when it comes to support (caniuse.com), but it's very succinct:
该pointer-eventsCSS属性是缺少了一点，当谈到支持（caniuse.com），但它是非常简洁：
.my-link { pointer-events: none; }
回答by Abhishek Bandil
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;
}
回答by wsanville
The disabledattribute isn't valid on all HTML elements I believe, see the MSDN article. That and the proper value for disabled is simply "disabled". Your best approach is to bind a click function that returns false.
该disabled属性对我认为的所有 HTML 元素都无效，请参阅MSDN 文章。这和禁用的正确值只是“禁用”。您最好的方法是绑定一个返回 false 的点击函数。
回答by Andrien Pecson
Append a class containing pointer-events:non
附加一个包含指针事件的类：非
.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}
$(this).addClass('active');
回答by IT ppl
Below will replace the link with it's text
下面将用它的文本替换链接
$('a').each(function () {
$(this).replaceWith($(this).text());
});
Edit :
编辑 ：
Above given code will work with hyperlinks with text only, it will not work with images. When we'll try it with image link it won't show any image.
上面给出的代码仅适用于文本的超链接，不适用于图像。当我们尝试使用图像链接时，它不会显示任何图像。
To make this code compatible with image links following will work fine
为了使此代码与以下图像链接兼容将正常工作
// 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());
});
explanation :In above given code snippets, in first snippet we are replacing all the image links with it's images only. After that we are replacing text links with it's text.
解释：在上面给出的代码片段中，在第一个片段中，我们仅用它的图像替换所有图像链接。之后，我们用它的文本替换文本链接。
回答by Bradley Flood
This also works well. Is simple, lite, and doesn't require jQuery to be used.
这也很好用。简单、精简，并且不需要使用 jQuery。
<a href="javascript:void(0)">Link</a>
