如何使用 jQuery 启用或禁用锚点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1164635/
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 to enable or disable an anchor using jQuery?
提问by Senthil Kumar Bhaskaran
How to enable or disable an anchor using jQuery?
如何使用 jQuery 启用或禁用锚点？
回答by karim79
To prevent an anchor from following the specified href, I would suggest using preventDefault():
为了防止锚点跟随指定的href，我建议使用preventDefault()：
// jQuery 1.7+
$(function () {
$('a.something').on("click", function (e) {
e.preventDefault();
});
});
// jQuery < 1.7
$(function () {
$('a.something').click(function (e) {
e.preventDefault();
});
// or
$('a.something').bind("click", function (e) {
e.preventDefault();
});
});
See:
看：
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
Also see this previous question on SO:
另请参阅有关 SO 的上一个问题：
回答by AgileJon
The app I'm currently working on does it with a CSS style in combination with javascript.
我目前正在开发的应用程序将 CSS 样式与 javascript 结合使用。
a.disabled { color:gray; }
Then whenever I want to disable a link I call
然后每当我想禁用链接时，我都会调用
$('thelink').addClass('disabled');
Then, in the click handler for 'thelink' a tag I always run a check first thing
然后，在“thelink”的点击处理程序中，我总是首先运行检查
if ($('thelink').hasClass('disabled')) return;
回答by Michael Meadows
I found an answer that I like much better here
我在这里找到了一个我更喜欢的答案
Looks like this:
看起来像这样：
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
Enabling would involve setting the href attribute
启用将涉及设置 href 属性
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
This gives you the appearance that the anchor element becomes normal text, and vice versa.
这使您看起来锚元素变成了普通文本，反之亦然。
回答by AlexC
$("a").click(function(){
alert('disabled');
return false;
});
回答by Michal B.
I think a nicer solution is to set disabled data attribute on and anchor an check for it on click. This way we can disable temporarily an anchor until e.g. the javascript is finished with ajax call or some calculations. If we do not disable it, then we can quickly click it a few times, which is undesirable...
我认为更好的解决方案是设置禁用数据属性并在单击时锚定检查。通过这种方式，我们可以暂时禁用锚点，直到例如 javascript 完成 ajax 调用或一些计算。如果我们不禁用它，那么我们可以快速点击它几次，这是不可取的......
$('a').live('click', function () {
var anchor = $(this);
if (anchor.data("disabled")) {
return false;
}
anchor.data("disabled", "disabled");
$.ajax({
url: url,
data: data,
cache: false,
success: function (json) {
// when it's done, we enable the anchor again
anchor.removeData("disabled");
},
error: function () {
// there was an error, enable the anchor
anchor.removeData("disabled");
}
});
return false;
});
I made a jsfiddle example: http://jsfiddle.net/wgZ59/76/
我做了一个 jsfiddle 例子：http: //jsfiddle.net/wgZ59/76/
回答by vitrilo
Selected Answer is not good.
选择的答案不好。
Use pointer-eventsCSS style. (As Rashad Annara 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 Victor AJ
Try the below lines
尝试以下几行
$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
Coz, Even if you disable <a>tag hrefwill work so you must remove hrefalso.
因为，即使您禁用<a>标记href也可以工作，因此您href也必须删除。
When you want enable try below lines
当你想启用尝试下面的行
$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
回答by Rashad Annara
$('#divID').addClass('disabledAnchor');
In css file
在 css 文件中
.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}
回答by kim edgard
It's as simple as return false;
就像 return false 一样简单；
ex.
前任。
jQuery("li a:eq(0)").click(function(){
return false;
})
or
或者
jQuery("#menu a").click(function(){
return false;
})
回答by Mohssen Beiranvand
$("a").click(function(event) {
event.preventDefault();
});
If this method is called, the default action of the event will not be triggered.
如果调用此方法，则不会触发事件的默认动作。
