jQuery禁用链接
Posted
技术标签:
【中文标题】jQuery禁用链接【英文标题】：jQuery disable a link 【发布时间】：2010-11-01 12:09:47 【问题描述】：有人知道如何在不使用 return false; 的情况下禁用 jquery 中的链接吗？
具体来说，我想要做的是禁用一个项目的链接，使用触发一些东西的 jquery 对其执行单击，然后重新启用该链接，以便如果再次单击它，它会默认工作。
谢谢。 戴夫
更新
这是代码。应用.expanded 类后需要做的是重新启用禁用的链接。
$('ul li').click(function(e)
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
//return false;
);
【问题讨论】：
为什么要求不使用return false？使用它，然后在它不再适用时删除事件处理程序（或在其中放置一个条件以根据提到的“某些东西”的状态返回不同的值）。 您是否只是想在同一个点击操作上点击链接之前进行一些预处理？即您不是提议两次点击，而是用户点击链接，发生一些操作，链接被关注？ 否则，您能否解释一下为什么采用这种方法，因为更好地理解问题空间会改善答案。 @lazarus，我建议在同一个链接上点击 2 次。 1先做一些事情，然后2nd将链接视为链接。 @daviddorward，到目前为止，我已经尝试 return false 并且它一直持续到我目标的第二部分，即不允许第二次点击通过。如果你能写一个简短的例子，我将不胜感激。 【参考方案1】：$('#myLink').click(function(e)
e.preventDefault();
//do other stuff when a click happens
);
这将阻止超链接的默认行为，即访问指定的href。
来自 jQuery tutorial:
对于点击和大多数其他事件，您 可以防止默认行为 - 在这里，点击 jquery.com 的链接 - 通过在事件处理程序中调用 event.preventDefault()
如果您想preventDefault() 仅在满足特定条件（例如隐藏某些内容）时，您可以使用 expanded 类测试您的 ul 的可见性。如果它是可见的（即不隐藏），则链接应该正常触发，因为不会输入 if 语句，因此不会阻止默认行为：
$('ul li').click(function(e)
if($('ul.expanded').is(':hidden'))
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
);
【讨论】：
使用 jQuery 1.7+ 你可以使用开/关：***.com/questions/209029/… 如果它有一个 href 和 onclick 这将起作用 $("#myLink").attr('onclick', '').click(function (e) e.preventDefault(); ); 通过 ajax 和 jquery 实现我可以隐藏一个具有回调的 href 购买，以防止爬虫获取这些链接。太棒了，谢谢！ this 帖子有使用引导程序的最简单方法，希望对您有所帮助。【参考方案2】：试试这个：
$("a").removeAttr('href');
编辑-
来自您更新的代码：
var location= $('#link1').attr("href");
$("#link1").removeAttr('href');
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
$("#link1").attr("href", location);
【讨论】：
使用 href 非常好，因为它是一种快速禁用通过 onclick 事件执行操作的链接的方法。非常非常聪明！ 在执行href="#"时防止浏览器在URI中添加#的好方法【参考方案3】：
对于像我这样通过谷歌来到这里的其他人 - 这是另一种方法：
css:
.disabled
color: grey; // ...whatever
jQuery:
$('#myLink').click(function (e)
e.preventDefault();
if ($(this).hasClass('disabled'))
return false; // Do something else in here if required
else
window.location.href = $(this).attr('href');
);
// Elsewhere in your code
if (disabledCondition == true)
$('#myLink').addClass('disabled')
else
$('#myLink').removeClass('disabled')
记住：这不仅仅是一个css类
class="按钮样式"
还有这两个
class="buttonstyle 禁用"
因此您可以使用 jQuery 轻松添加和删除更多类。无需触摸href...
我喜欢 jQuery！ ;-)
【讨论】：
这假设链接没有目标:) 与其做所有这些花哨的事情，不如直接在 dom 中增加 onclick，使用on() 过滤所有a.disabled 链接并防止默认。然后您所要做的就是打开/关闭禁用的类，并且链接将在“启用”时自行处理。
不需要 "== true" -- addClass('disabled') 无论如何都会运行。 if(disabledCondition)
@fwilson，虽然您完全正确，但对于初学者来说，使用== true 更容易理解。 :)
有什么特别的理由不将其简化为if ($(this).hasClass('disabled')) e.preventDefault(); ？【参考方案4】：
这是一个替代的 css/jQuery 解决方案，我更喜欢它的简洁性和最小化的脚本：
css:
a.disabled
opacity: 0.5;
pointer-events: none;
cursor: default;
jQuery:
$('.disableAfterClick').click(function (e)
$(this).addClass('disabled');
);
【讨论】：
From Mozilla: "警告：在 CSS 中为非 SVG 元素使用指针事件是实验性的。该功能曾经是 CSS3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS4。” 这是一个很好的考虑，但它恰好在大多数现代浏览器中运行良好。 您可能需要考虑在addClass 之后链接.prop("tabindex", "-1");【参考方案5】：
您可以通过以下方式删除点击链接；
$('#link-id').unbind('click');
您可以通过以下方式重新启用链接，
$('#link-id').bind('click');
您不能对链接使用“禁用”属性。
【讨论】：
与其他人相比，易于打开和关闭。 "您不能对链接使用 'disabled' 属性。"想知道为什么按钮和禁用链接之间没有一致性。 “禁用”也应该适用于链接。这就像说对于雪佛兰汽车，您必须踩下制动踏板才能停止，但对于其他汽车制造商，您必须使用位于车顶的这个杠杆。【参考方案6】：如果你走href路线，你可以保存它
禁用：
$('a').each(function()
$(this).data("href", $(this).attr("href")).removeAttr("href");
);
然后重新启用：
$('a').each(function()
$(this).attr("href", $(this).data("href"));
);
在一种情况下，我不得不这样做，因为点击事件已经绑定到其他地方，我无法控制它。
【讨论】：
【参考方案7】：我总是在 jQuery 中使用它来禁用链接
$("form a").attr("disabled", "disabled");
【讨论】：
您也可以使用$("form a").attr("disabled", false);重新启用它【参考方案8】：
html链接示例：
<!-- boostrap button + fontawesome icon -->
<a class="btn btn-primary" id="BT_Download" target="_blank" href="DownloadDoc?Id=32">
<i class="icon-file-text icon-large"></i>
Download Document
</a>
在 jQuery 中使用它
$('#BT_Download').attr('disabled',true);
将此添加到 css 中：
a[disabled="disabled"]
pointer-events: none;
【讨论】：
我以前从未遇到过这个 CSS 属性，但对我来说，这是迄今为止禁用超链接的最简单方法。它的美妙之处在于，当您从锚元素中删除包含pointer-events: none 属性的类时，它们会恢复为之前单击时所做的任何事情。因此，如果它们是基本超链接，它们将恢复导航到其href 属性中的 URL，并且如果它们设置了单击事件处理程序，则该处理程序再次变为活动状态。比保存 href 值和点击处理程序要简单得多。
我喜欢这个解决方案，它是最简单的。
在无济于事（几乎放弃这条路线）的少数“解决方案”中，来到了这个gem。这是一个简单的解决方案。并且唯一真正有效的。荣誉。
太棒了，太棒了【参考方案9】：
我最喜欢的“结帐以编辑项目并防止 - 狂野的西部点击到任何地方 - 在结帐时”功能
$('a').click(function(e)
var = $(this).attr('disabled');
if (var === 'disabled')
e.preventDefault();
);
因此，如果我希望在如上所述的“编辑模式”下禁用第二个操作工具栏中的所有外部链接，我将添加编辑功能
$('#actionToolbar .external').attr('disabled', true);
火灾后的链接示例：
<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>
现在你可以为链接使用 disabled 属性了
干杯！
【讨论】：
【参考方案10】：您可以随意隐藏和显示链接
$(link).hide();
$(link).show();
【讨论】：
你可以它只是不是很好的用户体验。【参考方案11】：只需触发一些东西，设置一些标志，返回 false。如果设置了标志 - 什么也不做。
【讨论】：
已尝试通过设置一个类，然后稍后调用该类但返回 false 进行，并阻止调用链接。【参考方案12】：你应该会找到你的答案here。
感谢@Will 和@Matt 提供这个优雅的解决方案。
jQuery('#path .to .your a').each(function()
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
);
【讨论】：
【参考方案13】：unbind() 在jQuery 3 中已弃用，请改用off() 方法：
$("a").off("click");
【讨论】：
【参考方案14】：我知道这与 jQuery 无关，但您可以使用一些简单的 css 禁用链接：
a[disabled]
z-index: -1;
HTML 看起来像
<a disabled="disabled" href="/start">Take Survey</a>
【讨论】：
【参考方案15】：只需设置 preventDefault 并返回 false
$('#your-identifier').click(function(e)
e.preventDefault();
return false;
);
此链接将被禁用，但您仍会看到一个可点击图标（手）图标。您也可以使用以下方法将其删除
$('#your-identifier').css('cursor', 'auto');
【讨论】：
【参考方案16】：这适用于内联设置了 onclick 属性的链接。这也允许您稍后删除“return false”以启用它。
//disable all links matching class
$('.yourLinkClass').each(function(index)
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", "return false; " + OnClickValue);
);
//enable all edit links
$('.yourLinkClass').each(function (index)
var link = $(this);
var OnClickValue = link.attr("onclick");
link.attr("onclick", OnClickValue.replace("return false; ", ""));
);
【讨论】：
【参考方案17】：作为一名后端工程师，我花了一段时间来思考如何做到这一点，但这是我解决完全相同问题的方法。
const resendCodeTimeOutPeriodInMs = 30000; // 30seconds.
function resend2faCodeOnLogin(sendByEmail)
const resendCodeLinkElement = $('#resendCodeLink');
const disabledState = resendCodeLinkElement.attr('disabled');
if (disabledState === 'disabled')
resendCodeLinkElement.preventDefault();
else
resendCodeLinkElement.attr("disabled", true);
resendCodeLinkElement.addClass('disabled');
submitForm('#twoFactorResendCodeForm', (response) =>
setTimeout(function ()
$('#resendCodeLink').removeClass('disabled');
resendCodeLinkElement.attr("disabled", false);
, resendCodeTimeOutPeriodInMs);
, (response) =>
console.error(response);
);
标准 CSS 取自网络上的知名示例：
a.disabled
opacity: 0.5;
pointer-events: none;
cursor: default;
我的方法是确保给定按钮在 UX 可以再次单击之前禁用 30 秒。
【讨论】：
【参考方案18】：只需使用$("a").prop("disabled", true);。
这将真正禁用 de 链接元素。
需要是prop("disabled", true)。不要使用attr("disabled", true)
【讨论】：
以上是关于jQuery禁用链接的主要内容，如果未能解决你的问题，请参考以下文章