如何使用 jQuery 启用或禁用锚？

$("a").click(function(){
alert('disabled');
return false;


});

为了防止锚跟随指定的 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。事件 # 事件。预防默认值。28.29

还可以看到前面关于 SO 的问题:

JQuery 禁用链接

如果您试图阻止与页面的所有交互，那么您可能需要查看 JQuery BlockUI 插件

你从来没有详细说明你希望它们如何失去功能，或者什么会导致它们失去功能。

首先，您需要弄清楚如何将值设置为禁用，因为您将使用 JQuery 的属性函数，并使该函数发生在 事件上，如 点击或文档的 加载中。

我目前正在开发的应用程序使用 CSS 样式与 javascript 相结合。

a.disabled { color:gray; }

然后，每当我想禁用一个链接，我调用

$('thelink').addClass('disabled');

然后，在“ thelink”标记的单击处理程序中，我总是首先运行一个检查

if ($('thelink').hasClass('disabled')) return;

它就像返回虚假一样简单;

前男友。

jQuery("li a:eq(0)").click(function(){
return false;
})

或者

jQuery("#menu a").click(function(){
return false;
})

我找到了一个我更喜欢的答案

看起来像这样:

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

这使您看到锚元素变成普通文本的外观，反之亦然。

$("a").click(function(event) {
event.preventDefault();
});

如果调用此方法，则不会触发事件的默认操作。

我认为一个更好的解决方案是设置禁用的数据属性，并锚定它的检查点击。这样我们可以暂时禁用一个锚，直到 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/

对于必须在锚标记中放入文本或 html 内容的情况，但是当单击该元素时根本不希望采取任何操作(比如当您希望分页器链接处于禁用状态，因为它是当前页面) ，只需删除 href。;)

<a>3 (current page, I'm totally disabled!)</a>

Michael-Meadows 的回答让我意识到了这一点，但他的回答仍然是解决你仍然需要/正在使用 jQuery/JS 的场景。在这种情况下，如果可以控制编写 HTML 本身，只需要 x-ing href 标记即可，因此解决方案是纯 HTML 的！

其他没有 jQuery 欺骗的解决方案保留 href，需要在 href 中放入一个 # ，但是这会导致页面跳到顶部，而你只是希望它被完全禁用。或者让它空着，但是根据浏览器的不同，它仍然会做一些事情，比如跳到顶部，而且，根据 IDE，它是无效的 HTML。但显然，a标记是完全有效的 HTML 没有一个 HREF。

最后，你可能会说: 好吧，为什么不干脆丢弃一个标签呢？因为通常不能，所以 a标签用于您正在使用的 CSS 框架或控件的样式化目的，比如 Bootstrap 的 paginator:

Http://twitter.github.io/bootstrap/components.html#pagination

试试下面几行

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

因此，即使你禁用 <a>标签 href将工作，所以你必须删除 href也。

如果需要启用，请尝试下面几行

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

如果您不需要它作为锚标记，那么我更愿意替换它。比如说 如果你的锚标签是像

<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行) ，语义也正确(因为我们现在不需要一个链接，所以不应该有一个链接)

$('#divID').addClass('disabledAnchor');

在 CSS 文件里

.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}

所以综合上面的答案，我想出了这个。

a.disabled { color: #555555; cursor: default; text-decoration: none; }


$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault();

禁用或启用具有禁用属性的任何元素。

// Disable
$("#myAnchor").prop( "disabled", true );


// Enable
$( "#myAnchor" ).prop( "disabled", false );

选择的答案是不好的。

使用 指针事件 CSS 样式

参见 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events。 大多数浏览器都支持它。

简单地添加“禁用”属性锚将做这项工作，如果你有全局 CSS 规则如下:

a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}