jQuery禁用链接答案

【问题标题】：jQuery disable a linkjQuery禁用链接
【发布时间】：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 并且它一直持续到我目标的第二部分，即不允许第二次点击通过。如果你能写一个简短的例子，我将不胜感激。

标签： jquery hyperlink

【解决方案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+ 你可以使用开/关：stackoverflow.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)

【讨论】：