如何使用jQuery启用或禁用锚点？

Question

如何使用jQuery启用或禁用锚点？

Answer 1

为了防止锚点跟随指定href,我建议使用preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

看到:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

另见SO上的上一个问题:

jQuery禁用链接

Answer 2

我正在处理的应用程序使用CSS样式与javascript结合使用它.

a.disabled { color:gray; }

然后每当我想禁用我打电话的链接

$('thelink').addClass('disabled');

然后,在'thelink'的点击处理程序中,我总是先检查一个标签

if ($('thelink').hasClass('disabled')) return;

Answer 3

我在这里找到了一个我更喜欢的答案

看起来像这样:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

启用将涉及设置href属性

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

这为您提供了锚元素成为普通文本的外观,反之亦然.

Answer 4

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Answer 5

我认为一个更好的解决方案是设置禁用的数据属性并在点击时锚定它的检查.这样我们可以暂时禁用一个锚,直到例如javascript完成了ajax调用或一些计算.如果我们不禁用它,那么我们可以快速点击几次,这是不可取的......

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

我做了一个jsfiddle例子:http://jsfiddle.net/wgZ59/76/

Answer 6

选择答案不好.

使用指针事件 CSS样式.(正如Rashad Annara建议的那样)

请参阅MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events.大多数浏览器都支持它.

如果你有如下全局CSS规则,那么简单地将"disabled"属性添加到锚点就可以完成这项工作:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Answer 7

试试以下几行

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz,即使你禁用<a>标签href也会有效,所以你href也必须删除.

如果你想要启用尝试下面的行

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

Answer 8

它就像返回false一样简单;

恩.

jQuery("li a:eq(0)").click(function(){
   return false;
})

要么

jQuery("#menu a").click(function(){
   return false;
})

Answer 9

$('#divID').addClass('disabledAnchor');

在css文件中

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

Answer 10

$("a").click(function(event) {
  event.preventDefault();
});

如果调用此方法,则不会触发事件的默认操作.