jQuery禁用链接

时间:2009-06-09 14:27:59

标签: jquery hyperlink

任何人都知道如何在jquery中禁用链接而不使用return false;

具体来说,我要做的是禁用项目的链接,使用jquery执行点击它,触发一些东西,然后重新启用该链接,这样如果再次点击它就会默认工作。 / p>

感谢。 戴夫

更新 这是代码。应用.expanded类后需要做的是重新启用已禁用的链接。

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

17 个答案:

答案 0 :(得分:353)

$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

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

来自jQuery tutorial

  

对于点击和大多数其他活动,您   可以防止默认行为 -   点击此处,链接到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);
    } 
});

答案 1 :(得分:102)

试试这个:

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

修改 -

从您更新的代码:

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

答案 2 :(得分:63)

对于像我这样通过谷歌来到这里的其他人 - 这是另一种方法:

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”

但也是这两个

  

class =“buttonstyle disabled”

因此您可以使用jQuery轻松添加和删除更多类。无需触摸href ...

我喜欢jQuery! ; - )

答案 3 :(得分:51)

这是一个替代的css / jQuery解决方案,我更喜欢它的简洁性和最小化脚本:

的CSS:

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

jQuery的:

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

答案 4 :(得分:16)

您可以通过以下方式删除点击链接;

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

您可以通过以下方式重新启用链接

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

您不能将'禁用'属性用于链接。

答案 5 :(得分:14)

如果你去了href路线,你可以保存它

要禁用:

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

然后使用:

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

在一个案例中,我必须这样做,因为点击事件已经绑定在其他地方,我无法控制它。

答案 6 :(得分:7)

我总是在jQuery中使用它来禁用链接

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

答案 7 :(得分:4)

我喜欢“结帐以编辑项目并防止野外西部点击到任何地方 - 在结帐时”功能

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

现在您可以使用已禁用的属性进行链接

干杯!

答案 8 :(得分:4)

html链接示例:

from GUI import *

a = GUI(schermata)
l = Livelli()

if __name__ == "__main__":

  a.mainloop()
  l.cicloLivelli()

在jQuery中使用

        <!-- 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>

将此添加到css:

    $('#BT_Download').attr('disabled',true);

答案 9 :(得分:3)

您应该找到答案here

感谢@Will和@Matt这个优雅的解决方案。

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

答案 10 :(得分:3)

您可以随意隐藏和显示链接

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

答案 11 :(得分:2)

只需触发内容,设置一些标志,返回false。如果设置了标志 - 什么都不做。

答案 12 :(得分:1)

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

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

答案 13 :(得分:0)

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

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

HTML看起来像

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

答案 14 :(得分:0)

这适用于将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; ", ""));
        });

答案 15 :(得分:0)

只需设置preventDefault并返回false

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

此链接将被禁用,但是您仍然会看到一个可点击图标()图标。您也可以在下面删除它

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

答案 16 :(得分:-2)

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