如何使用 jQuery 启用或禁用锚点？
问问题
320173 次
16 回答
194
为了防止锚点遵循指定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();
});
});
看：
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
另请参阅关于 SO 的上一个问题：
于 2009-07-22T11:33:20.140 回答
116
我目前正在开发的应用程序结合了 CSS 样式和 javascript。
a.disabled { color:gray; }
然后每当我想禁用我调用的链接
$('thelink').addClass('disabled');
然后，在“thelink”标签的点击处理程序中，我总是首先运行检查
if ($('thelink').hasClass('disabled')) return;
于 2009-07-22T11:39:27.773 回答
41
我在这里找到了我更喜欢的答案
看起来像这样：
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
启用将涉及设置 href 属性
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
这使您看起来锚元素变为普通文本，反之亦然。
于 2010-09-17T15:31:22.420 回答
12
$("a").click(function(){
alert('disabled');
return false;
});
于 2009-07-22T11:33:03.917 回答
12
我认为一个更好的解决方案是设置禁用数据属性并在单击时对其进行检查。通过这种方式，我们可以暂时禁用锚点，直到 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;
});
我做了一个jsfiddle例子：http: //jsfiddle.net/wgZ59/76/
于 2012-03-21T10:27:29.230 回答
12
选择的答案不好。
使用指针事件CSS 样式。（正如拉沙德·安娜拉建议的那样）
请参阅 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。大多数浏览器都支持它。
如果你有如下的全局 CSS 规则，简单地添加“禁用”属性到锚点就可以了：
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
于 2016-03-02T11:45:38.573 回答
10
试试下面的几行
$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
因为，即使您禁用<a>标签href也会起作用，因此您也必须删除href。
当您想要启用时，请尝试以下行
$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
于 2014-08-05T10:52:26.200 回答
10
$('#divID').addClass('disabledAnchor');
在 css 文件中
.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}
于 2015-08-16T05:31:11.380 回答
8
就像 return false 一样简单；
前任。
jQuery("li a:eq(0)").click(function(){
return false;
})
或者
jQuery("#menu a").click(function(){
return false;
})
于 2010-06-22T06:19:54.060 回答
5
$("a").click(function(event) {
event.preventDefault();
});
如果调用该方法，则不会触发事件的默认动作。
于 2010-12-18T18:19:16.020 回答
4
如果您试图阻止与页面的所有交互，您可能需要查看jQuery BlockUI 插件
于 2009-07-22T11:38:22.687 回答
4
您从未真正指定您希望如何禁用它们，或者导致禁用的原因。
首先，您想弄清楚如何将值设置为 disabled，因为您将使用JQuery 的 Attribute Functions，并让该功能发生在event上，例如click或加载文档。
于 2009-07-22T11:39:01.190 回答
1
对于必须将文本或 html 内容放在锚标记中的情况，但您根本不希望在单击该元素时执行任何操作（例如，当您希望分页器链接处于禁用状态时，因为它是当前页面），只需剪掉href。;)
<a>3 (current page, I'm totally disabled!)</a>
@michael-meadows 的回答让我知道了这一点，但他仍在解决您仍然必须/正在使用 jQuery/JS 的情况。在这种情况下，如果您可以控制编写 html 本身，只需 x-ing href 标记即可，因此解决方案是纯 HTML 的！
其他没有 jQuery finagling 的保留 href 的解决方案要求您在 href 中添加一个 #，但这会导致页面反弹到顶部，并且您只希望它是普通的旧禁用。或者将其留空，但取决于浏览器，它仍然会跳转到顶部，并且根据 IDE，它是无效的 HTML。但显然，a标签是完全有效的 HTML，没有 HREF。
最后，你可能会说：好吧，为什么不直接转储 a 标签呢？因为通常你不能，所以a标签用于 CSS 框架或你正在使用的控件中的样式，比如 Bootstrap 的分页器：
http://twitter.github.io/bootstrap/components.html#pagination
于 2013-05-20T17:23:07.547 回答
1
所以结合上面的回答，我想出了这个。
a.disabled { color: #555555; cursor: default; text-decoration: none; }
$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();
于 2015-09-23T19:35:17.613 回答
0
如果您不需要它充当锚标签，那么我宁愿完全替换它。例如，如果您的锚标签就像
<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>
然后使用 jquery 可以在需要显示文本而不是链接时执行此操作。
var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")
所以这样，我们可以简单地将锚标签替换为 div 标签。这更容易（只有 2 行）并且在语义上也是正确的（因为我们现在不需要链接，因此不应该有链接）
于 2014-09-29T14:19:30.453 回答
0
禁用或启用任何具有禁用属性的元素。
// Disable
$("#myAnchor").prop( "disabled", true );
// Enable
$( "#myAnchor" ).prop( "disabled", false );
于 2016-02-08T16:33:10.043 回答