jQuery禁用链接

有人知道如何禁用jquery链接而不使用return false;吗?

具体来说，我要做的是禁用一个项目的链接，使用jquery执行点击它触发一些东西，然后重新启用该链接，以便如果它再次单击它作为默认工作。

< p >谢谢。 戴夫< / p >

<强>更新 这是代码。在.expanded类被应用之后，它需要做的是重新启用禁用的链接。

$('ul li').click(function(e) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
//return false;
});
666865 次浏览
小开

只要触发东西，设置标志，返回false。如果设置了flag -什么都不做。

小开
最佳答案 
$('#myLink').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});

这将防止超链接的默认行为，即访问指定的href。

jQuery 教程:

对于点击和大多数其他事件，你 可以防止默认行为- 点击链接，进入jquery。com -通过在事件处理程序中调用event. preventdefault ()

如果你只想在满足某个条件(例如隐藏了一些东西)时才preventDefault()，你可以用类扩大测试你的ul的可见性。如果它是可见的(即不隐藏)，链接应该正常触发，因为If语句不会被输入，因此默认行为将不会被阻止:

$('ul li').click(function(e) {
if($('ul.expanded').is(':hidden')) {
e.preventDefault();
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
}
});
小开

试试这个:

$("a").removeAttr('href');

编辑-

从您更新的代码:

 var location= $('#link1').attr("href");
$("#link1").removeAttr('href');
$('ul').addClass('expanded');
$('ul.expanded').fadeIn(300);
$("#link1").attr("href", location);
小开

对于像我这样通过谷歌来到这里的人，这里有另一种方法:

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类

类= " buttonstyle "

还有这两个

类= " buttonstyle禁用"

所以你可以很容易地添加和删除更多的类与jQuery。没必要碰它…

我爱jQuery!;-）

小开

下面是另一个css/jQuery解决方案，我更喜欢它的简洁和最小化脚本:

css:

a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
$(this).addClass('disabled');
});
小开

你会发现你的答案是在这里。

感谢@威尔和@马特的优雅解决方案。

jQuery('#path .to .your a').each(function(){
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
});
小开

您可以删除点击链接按以下;

$('#link-id').unbind('click');

您可以通过以下操作重新启用链接，

$('#link-id').bind('click');

不能对链接使用“disabled”属性。

小开

我最喜欢的是“签出编辑项目和防止-狂野西部点击到任何地方-在签出”功能

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

现在你可以使用禁用属性链接

干杯!

小开

我总是用这个在jQuery禁用链接

$("form a").attr("disabled", "disabled");
小开

如果您使用href路径，则可以保存它

禁用:

$('a').each(function(){
$(this).data("href", $(this).attr("href")).removeAttr("href");
});

然后重新启用使用:

$('a').each(function(){
$(this).attr("href", $(this).data("href"));
});

在一种情况下，我不得不这样做，因为点击事件已经绑定到其他地方，我无法控制它。

小开

你可以隐藏和显示你喜欢的链接

$(link).hide();
$(link).show();
小开

我知道这不是用jQuery，但你可以用一些简单的css禁用一个链接:

a[disabled] {
z-index: -1;
}

HTML看起来是这样的

<a disabled="disabled" href="/start">Take Survey</a>
小开

只需使用$("a").prop("disabled", true);。 这将真正禁用de link元素。 需要为prop("disabled", true)。不要使用attr("disabled", true)

小开

这适用于内联设置了onclick属性的链接。这也允许您稍后删除“返回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; ", ""));
});
小开

unbind()在jQuery 3中已弃用，请改用off()方法:

$("a").off("click");
小开

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;
}
小开

只需设置preventDefault并返回false

   $('#your-identifier').click(function(e) {
e.preventDefault();
return false;
});

这将是一个禁用的链接，但你仍然会看到一个可点击的图标(手)图标。你也可以删除下面

$('#your-identifier').css('cursor', 'auto');
小开

作为后端工程师，我花了一段时间来思考如何做到这一点，但下面是我如何解决完全相同的问题。

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;

我的方法是确保一个给定的按钮在用户体验可以再次点击它之前被禁用30秒。


提交答案