jQuery禁用链接

Question

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

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

谢谢.戴夫

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

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

Answer 1

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

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

从jQuery 教程:

对于click和大多数其他事件,您可以通过在事件处理程序中调用event.preventDefault()来阻止默认行为 - 此处,通过指向jquery.com的链接

如果您只想preventDefault()满足某个条件(例如隐藏某些条件),您可以在展开的类中测试ul的可见性.如果它是可见的(即不隐藏),则链接应该正常触发,因为不会输入if语句,因此不会阻止默认行为:

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

Answer 2

试试这个:

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

编辑-

从您更新的代码:

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

Answer 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类

类= "的ButtonStyle"

还有这两个

class ="buttonstyle disabled"

所以你可以使用jQuery轻松添加和删除更多类.无需触摸href ...

我喜欢jQuery!;-)

Answer 4

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

CSS:

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

jQuery的:

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

Answer 5

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

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

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

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

您不能将"禁用"属性用于链接.

Answer 6

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

要禁用:

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

然后重新启用使用:

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

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

Answer 7

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

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

Answer 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;
    }

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

现在您可以对链接使用禁用属性

干杯!