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

Posted 2023-05-07

【中文标题】如何使用 jQuery 启用或禁用锚点？

【英文标题】：How to enable or disable an anchor using jQuery?

【发布时间】：2010-11-12 23:20:46

【问题描述】：

【问题讨论】：

感谢您的所有回答，但它仍然无法正常工作，所以请您使用 document.ready 功能使其工作

如果您发布无效代码的 sn-p 可能会有所帮助。

实际上我的编码是在 Rails 中，我的编码是 当我将它渲染到浏览器中时，我可以看到电子邮件，但我无法禁用它，即使我尝试使用诸如 e.preventDefault() 之类的编码但没有结果

【参考方案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

【讨论】：

我尝试使用那些“attr”，它只适用于表单元素，而不适用于 Anchor 标记。

@senthil - preventDefault 被认为是这样做的“正确”方式，请参阅我的编辑（链接到另一个 Q+A）

实际上我的编码是在 Rails 中，我的编码是 当我将它渲染到浏览器中时，我可以看到电子邮件，但我无法禁用它，即使我尝试使用诸如 e.preventDefault() 之类的编码但没有结果

如何反转$('a.something').on("click", function (e) e.preventDefault(); );？

不同意，使用 CSS "pointer-events: none;"相反，就像其他答案一样。

【参考方案2】：

我目前正在开发的应用程序结合了 CSS 样式和 javascript。

a.disabled  color:gray; 

然后每当我想禁用我调用的链接时

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

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

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

【讨论】：

最后一行不应该说“return false;”吗？

好电话，普雷斯托。当绑定到 标签时，我使用： .. then: function disableLink(node) if (dojo.hasClass(node, 'disabled') return false; dojo.addClass(node, 'disabled'); return true; .. 这允许单击链接一次并执行操作（返回 true），然后不允许执行操作（返回假）。

请注意，在处理程序中您可能应该使用 $(this) 而不是 $("thelink") 因为这可能会发生变化，或者用户可以通过这种方式轻松复制/粘贴代码。

建议你也将'cursor: default'添加到禁用的样式中。

【参考方案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"); 
    );
);

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

【参考方案4】：

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

); 

【参考方案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/

【参考方案6】：

所选答案不好。

使用 pointer-events CSS 样式。 （正如 Rashad Annara 建议的那样）

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

如果你有如下的全局 CSS 规则，简单地添加“禁用”属性到锚点就可以了：

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

【讨论】：

对于指针事件，您也不需要包含 :hover 状态，因为这是一个指针事件。您只需要包含 a[disabled] 选择器。

【参考方案7】：

试试下面几行

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

因为，即使您禁用 <a> 标签 href 也将起作用，因此您也必须删除 href。

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

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

【讨论】：

这正是我在将 JQuery 与 ASP.net MVC ActionLink 结合使用时所需要的。谢谢！

【参考方案8】：

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

在css文件中

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

【参考方案9】：

返回false就这么简单；

例如

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

或

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

【参考方案10】：

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

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

【参考方案11】：

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

【参考方案12】：

您从未真正指定要如何禁用它们，或者导致禁用的原因。

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

【参考方案13】：

对于您必须将文本或 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

【参考方案14】：

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

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

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

【参考方案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 标签。这更容易（只有 2 行）并且在语义上也正确（因为我们现在不需要链接，因此不应该有链接）

【参考方案16】：

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

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

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

【讨论】：

为什么这个答案被否决了？它回答了“如何使用 jQuery 启用或禁用锚点？”的问题

我相信这是因为点击锚点时链接仍然会打开。