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

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

为了防止锚点遵循指定的内容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的先前问题：

jQuery禁用链接

我目前正在使用的应用程序结合CSS样式和CSS样式来实现。

a.disabled { color:gray; }

然后，每当我要禁用链接时，我都会呼叫

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

然后，在“ thelink”标签的点击处理程序中，我总是先执行检查

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

我在这里找到了我更喜欢的答案

看起来像这样：

$(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(){
                alert('disabled');
                return false;

}); 

我认为一个更好的解决方案是在其上设置禁用的数据属性，并在单击时对其进行锚定检查。这样，我们可以临时禁用锚，直到例如用ajax调用或某些计算完成javascript。如果我们不禁用它，那么我们可以快速单击它几次，这是不可取的。

$('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/

选择的答案不好。

使用指针事件 CSS样式。（如拉沙德·安纳拉（Rashad Annara）所建议）

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

如果您具有如下所示的全局CSS规则，只需将简单的“ disabled”属性添加到锚即可：

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

尝试以下几行

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

Coz，即使您禁用<a>标签href也可以，所以您href也必须将其删除。

当您想要启用时，请尝试以下行

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

就像返回false一样简单。

例如

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

要么

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

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

在css文件中

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

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

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

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

您从未真正指定过要禁用它们的方式，或导致禁用的原因。

首先，您想弄清楚如何将值设置为disable，因为您将使用JQuery的Attribute Functions，并使该函数发生在诸如click或加载文档之类的事件上。

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

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

@ michael-meadows的回答使我明白了这一点，但是他仍然在解决仍需要/正在使用jQuery / JS的场景。在这种情况下，如果您可以控制自己编写html，那么只需对x标记进行x-ing操作即可，因此解决方案就是一个纯HTML的解决方案！

保留href的其他没有jQuery查找的解决方案都要求您在href中加＃，但这会使页面跳至顶部，而您只希望它已被禁用。或将其保留为空，但取决于浏览器，它仍然会执行跳转到顶部的操作，并且根据IDE，它是无效的HTML。但显然，a标记是完全有效的HTML，没有HREF。

最后，您可能会说：好吧，为什么不将标签全部丢弃呢？因为通常您不能这样做，所以该a标记用于CSS框架中的样式目的或您正在使用的控件，例如Bootstrap的分页器：

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

因此，结合以上回答，我想到了这个。

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

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

如果您不需要它充当锚标签，那么我宁愿完全替换它。例如，如果您的锚标记是

<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标签替换锚标签。这更容易（只需两行），语义上也正确（因为我们现在不需要链接，因此不应该有链接）

使用disabled属性禁用或启用任何元素。

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

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