Question

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

Answer 1

为防止锚点跟踪指定的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 disable a link

Answer 2

我正在处理的应用程序使用CSS样式与javascript结合使用。

a.disabled { color:gray; }

然后每当我想要禁用链接时，我都会调用

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

然后，在'thelink'的点击处理程序中，我总是首先运行检查

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

Answer 3

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

看起来像这样：

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

这使您看起来锚元素成为普通文本，反之亦然。

Answer 4

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

});

Answer 5

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

Answer 6

就像return false一样简单;

离。

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

或

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

Answer 7

尝试以下行

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

Coz，即使您停用<a>代码href也行，所以您也必须删除href。

如果您想要启用，请尝试以下行

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

Answer 8

选择的答案不好。

使用指针事件 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;
}

Answer 9

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

在css文件中

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

Answer 10

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

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

Answer 11

如果您尝试阻止与该网页的所有互动，您可能需要查看jQuery BlockUI Plugin

Answer 12

您从未真正指定过如何禁用它们，或者什么会导致禁用。

首先，您想弄清楚如何将值设置为已禁用，因为您将使用JQuery's Attribute Functions，并在event上执行该功能，如click，或文件的loading。

Answer 13

对于必须在锚标记中放置text或html内容的情况，但是在单击该元素时根本不希望采取任何操作（例如，当您希望paginator链接处于禁用状态时）状态，因为它是当前页面），只需剪切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标签是没有HREF的完全有效的HTML。

最后，你可能会说：好吧，为什么不直接转储一个标签呢？因为通常你不能，a标签用于CSS框架中的样式设置或你正在使用的控件，比如Bootstrap的paginator：

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

Answer 14

所以结合上面的回答，我想出了这个。

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

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

Answer 15

如果你不需要它作为锚标记，那么我宁愿更换它。例如如果你的锚标签是

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

Answer 16

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

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

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

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

16 个答案: