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

145

2009-07-22 Senthil Kumar Bhaskaran

感谢您的回答，仍是不工作，所以可以请你使其与工作document.ready函数 – 2009-07-22 12:21:37

如果您发布不起作用的代码片段，它可能会有所帮助。 – 2009-07-22 12:26:16

其实我的编码是Rails和我的编码是 <％= foo.add_associated_link（“添加邮箱”，@ project.email.build）％> 当我使其成为浏览器中我可以看到的电子邮件，但我不能禁用它即使我尝试编码，如e.preventDefault（）但没有结果 – 2009-07-23 04:28:58

187

为了防止锚从以下指定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

也可参阅所以这个前面的问题：

jQuery disable a link

来源

2009-07-22 11:33:20 karim79

我试着用这些“attr”它只在表单元素上工作，而不是锚标签。 – 2009-07-22 12:09:58

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

其实我的编码是在Rails中编写的，我的编码是<％= foo.add_associated_link（'Add email'， @ project.email.build）％>当我将它呈现在浏览器中时，我可以看到电子邮件，但是我不能禁用它，即使我尝试了编码，例如e.preventDefault（）但没有结果 – 2009-07-23 04:30:35

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

});

来源

2009-07-22 11:33:03 AlexC

如果你正在试图阻止与页面的所有互动，你可能想看看jQuery BlockUI Plugin

来源

2009-07-22 11:38:22

你从来没有真正指定你如何希望他们残疾，或有什么会导致禁用。

首先，你要弄清楚如何将值设置为禁用，为您将使用JQuery's Attribute Functions，并具有功能发生在一个event，像click，或文档loading。

来源

2009-07-22 11:39:01 Sneakyness

110

我目前正在处理的应用程序是否将它与CSS组合的javascript样式进行了处理。

a.disabled { color:gray; }

然后，每当我想禁用链接我叫

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

然后，在“thelink”标签中单击处理我始终运行检查第一件事

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

来源

2009-07-22 11:39:27 AgileJon

这就像返回false一样简单;

ex。

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

或

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

来源

2010-06-22 06:19:54

我找到了答案，我喜欢好多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"); 
    }); 
});

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

来源

2010-09-17 15:31:22

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

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

来源

2010-12-18 18:19:16

我认为一个更好的解决方案是设置禁用的数据属性并在点击时对其进行锚定检查。这样我们可以临时禁用锚点直到例如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-21 10:27:29

对于您必须将文本或HTML的情况内容在一个定位标记中，但当你点击该元素时你根本不想采取任何行动（就像你希望一个分页器链接处于禁用状态，因为它是当前页面），只需简单地删除HREF。 ;）

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

由@迈克尔 - 草地答案放倒我离开这一点，但他仍解决方案，您还是得/和jQuery/JS工作。在这种情况下，if您可以控制编写html本身，只需简单地将href标记x就可以了，所以解决方案是纯HTML的！

其他解决方案没有保留href的jQuery finagling要求你在href中放一个＃，但这会导致页面跳转到顶部，而你只是希望它被禁用。或者将它留空，但依赖于浏览器，它仍然会跳转到顶部，而且根据IDE，它是无效的HTML。但显然a标记是完全有效的HTML，没有HREF。

最后，你可能会说：好的，为什么不把一个标签完全转储？因为往往你不能，则a标签用于造型的目的在CSS框架或控制您正在使用，像引导的分页程序：

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

来源

2013-05-20 17:23:07

尝试下面的线

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

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

当您想要启用以下行

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

来源

2014-08-05 10:52:26

尝试，如果你不需要它表现为一个锚定标记，然后我宁愿替代它。例如如果你的锚标签是像

<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-29 14:19:30 adeel41

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

在CSS文件

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

来源

2015-08-16 05:31:11

因此，与上面的答案的组合，我想出了这个。

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

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

来源

2015-09-23 19:35:17 LawMan

-1

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

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

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

来源

2016-02-08 16:33:10 RitchieD

精选答案不好。

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

来源

2016-03-02 11:45:38 vitrilo

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

回答

相关问题