jQuery 如何使锚链接不可点击或禁用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7654900/
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
How do you make an anchor link non-clickable or disabled?
提问by Evik James
I have an anchor link that I want to disable once the user clicks on it. Or, remove the anchor tag from around the text, but definitely keep the text.
我有一个锚链接，一旦用户点击它，我想禁用它。或者，从文本周围删除锚标记，但一定要保留文本。
<a href='' id='ThisLink'>some text</a>
I can do this easily with a button by adding .attr("disabled", "disabled");
I successfully added the disabled property, but the link was still clickable.
I don't really care if the text is underlined or not.
通过添加.attr("disabled", "disabled");
我成功添加了禁用属性，我可以使用按钮轻松完成此操作，但链接仍然可以点击。
我真的不在乎文本是否有下划线。
Any clue?
有什么线索吗？
When you click on the wrong musician, it should just add "Wrong" and then become unclickable.
When you click and you are correct, it should add "Awesome" and then disable all <a>tags.
当您点击错误的音乐家时，它应该只添加“错误”，然后变得无法点击。
当您点击并且您是正确的时，它应该添加“Awesome”然后禁用所有<a>标签。
采纳答案by MSI
I just realized what you were asking for(I hope). Here's an ugly solution
我刚刚意识到你的要求（我希望）。这是一个丑陋的解决方案
var preventClick = false;
$('#ThisLink').click(function(e) {
$(this)
.css('cursor', 'default')
.css('text-decoration', 'none')
if (!preventClick) {
$(this).html($(this).html() + ' lalala');
}
preventClick = true;
return false;
});
回答by mvinayakam
The cleanest method would be to add a class with pointer-events:none when you want to disable a click. It would function like a normal label.
最干净的方法是在您想禁用单击时添加一个带有 pointer-events:none 的类。它的功能就像一个普通的标签。
.disableClick{
pointer-events: none;
}
回答by Shiv Kumar Sah
<a href='javascript:void(0);'>some text</a>
回答by vitrilo
Use pointer-eventsCSS style. (as Jason MacDonald suggested)
使用指针事件CSS 样式。（正如杰森麦克唐纳所建议的那样）
See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events. Its supported in most browsers.
请参阅 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。大多数浏览器都支持它。
Simple adding "disabled" attribute to anchor will do the job if you have global CSS rule like following:
如果您有如下的全局 CSS 规则，简单地将“禁用”属性添加到锚点就可以完成这项工作：
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
回答by Ashot
$('a').removeAttr('href')
or
或者
$('a').click(function(){ return false})
It depends on situation
这取决于情况
回答by Yevgeniy Afanasyev
Bootstrap provide us with .disabledclass. Please use it.
Bootstrap 为我们提供了.disabled类。请使用它。
But .disabledclass only works when the 'a' tag already has class 'btn'. It doesn' t work on any old 'a' tag. The btnclass may not be appropriate in some context as it has style connotations. Under the covers, the .disabledclass sets pointer-eventsto none, so you can make CSS to do the same thing as Saroj Aryal and Vitrilo have sugested. (Thank you, Les Nightingill for this advice).
但是.disabledclass 仅在 'a' 标签已经具有 class 'btn' 时才有效。它不适用于任何旧的“a”标签。该btn班可能无法在某些情况下是合适的，因为它有风格的内涵。在幕后，.disabled该类设置pointer-events为none，因此您可以使 CSS 执行与 Saroj Aryal 和 Vitrilo 所建议的相同的事情。（感谢 Les Nightingill 的建议）。
回答by Jason MacDonald
Add a cssclass:
添加一个css类：
.disable_a_href{
pointer-events: none;
}
Add this jquery:
添加这个jquery：
$("#ThisLink").addClass("disable_a_href");
回答by Explosion Pills
Just remove the hrefattribute from the anchor tag.
只需href从锚标记中删除该属性即可。
回答by Kedar.Aitawdekar
The best way is to prevent the default action. In the case of anchor tag, the default behavior is redirecting to hrefspecified address.
最好的方法是阻止默认操作。在锚标记的情况下，默认行为是重定向到href指定地址。
So following javascript works best in the situation:
因此，在这种情况下，以下 javascript 效果最佳：
$('#ThisLink').click(function(e)
{
e.preventDefault();
});
回答by Pankaj
Jason MacDonald comments worked for me, tested in Chrome, Mozila and IE.
Jason MacDonald 的评论对我有用，在 Chrome、Mozila 和 IE 中测试过。
Added gray color to show disable effect.
添加了灰色以显示禁用效果。
.disable_a_href{
pointer-events: none;
**color:#c0c0c0 !important;**
}
Jquery was selecting only first element in the anchor list, added meta character (*) to select and disable all element with id #ThisLink.
Jquery 只选择锚列表中的第一个元素，添加元字符 (*) 来选择和禁用所有带有 id 的元素#ThisLink。
$("#ThisLink*").addClass("disable_a_href");
