单击后禁用CSS链接1秒钟

Question

单击后，我试图禁用CSS链接1秒钟。

我尝试过但没有成功；

在标题中：

<script type="text/javascript">
$(function() {
    $("#link").click(function() {
        $("#link").attr("disabled", "disabled");
        setTimeout(function() {
            $("#link").removeAttr("disabled");      
        }, 2000);
    });
});
</script>

HTML：

<a href="#" class="link">the link text</a>

CSS：

.link:diabled {
some values here.. }

Answer 1

您有一个class="link" ，但是使用$("#link")寻址名为link的id 。

所以到处写$(".link")而不是$("#link") 。

顺便说一句：使用.link:disabled您将不会处理该链接，因为该链接仅适用于输入和按钮。 如果您需要解决它，请使用.link[disabled="disabled"] { ... }甚至更好添加一个类叫disabled_link然后在CSS做.disabled_link { ... }

Answer 2

'link'是一个类 ，您将其用作ID 。 用$('.link')代替$('#link') 。

Answer 3

这里有很多问题：

1. 您正在使用# （ID选择器），但是您的html使用的是类。
2. <a>没有禁用的属性
3. 如果确实如此，您可能要使用.prop而不是.attr
4. 如果将代码更改为使用类，则$(".link").prop("disabled", true)将影响所有锚点，因此您可能应该使用this 。
5. 因为<a>不存在disabled ，所以:disabled选择器似乎不适用于CSS。

一个有效的解决方案将是这样的：

$(".link").click(function() {
    var $this = $(this);
    $this.addClass('disabled');
    setTimeout(function() {
        $this.removeClass('disabled');
    }, 2000);
});

$(document).on('click', '.disabled', function (e) {
    e.preventDefault();
});

http://jsfiddle.net/ExplosionPIlls/PaYcc/

Answer 4

我认为这种方法效果更好。 另一个允许您多次单击链接并弄乱setTimeout，这将取消绑定事件，然后在setTimeout ex之后重新附加事件：双击链接

$(".link").click(linkBind);
function linkBind(){
    var $this = $(this);
        $this.addClass('disabled');
        $this.unbind('click');
        setTimeout(function() {
            $this.removeClass('disabled');
            $this.bind('click', linkBind);
        }, 2000);
}

$(document).on('click', '.disabled', function (e) {
    e.preventDefault();
});

http://jsfiddle.net/PaYcc/1/