Question

我希望在点击我的按钮后，它会在几秒钟内无法点击，我该怎么办呢？我想为所有按钮编写代码，而不仅仅是一个代码。所以，我需要这样的东西：

$(document).ready(function() {      
    $('input[type="button"]').click(function() {
        $(this).css("hidden: true");
        delay(3);
        $(this).css("hidden: normal");
    })    
})

这只是一个伪代码，你能帮我一把吗？

Answer 1

使用jQuery ......

$(document).ready(function() {      
    $('input[type="button"]').click(function() {
        var input = this;
        input.disabled = true;
        setTimeout(function() {
           input.disabled = false;
        }, 3000);

    });    
});

jsFiddle

没有jQuery ......

document.addEventListener('DOMContentLoaded', () => {      
    document.querySelectorAll('input[type="button"]')
    .addEventListener('click', (e) => {
        let input = e.target;
        input.disabled = true;
        setTimeout(function() {
           input.disabled = false;
        }, 3000);

    });    
});

或者捕获持久性祖先元素的点击，并检查它们是否为input[type="button"]类型。这可以防止为每个元素附加多个事件。

Answer 2

禁用元素是通过添加disabled属性，为其赋予值disabled来完成的。再次启用它是通过删除属性来完成的。

更新：使用setTimeout修复了答案 - 抱歉与$.delay混淆。

$(document).ready(function() {      
    $('input[type="button"]').click(function() {
        var el = $(this);
        el.attr('disabled', 'disabled');
        setTimeout(function() { el.removeAttr('disabled'); }, 3000);
    })    
})

Answer 3

添加已禁用的属性。

$(this).attr('disabled', true);

Answer 4

这应该这样做。

$(document).ready(function() {      
    $('input[type="button"]').click(function() {
        $(this).hide().delay(3000).show();
    })    
})

Answer 5

在这里小提琴：http://jsfiddle.net/ezmilhouse/Hw6Gf/1/

$(document).ready(function() {      
    $('input[type="button"]').click(function() {
        $(this).attr('disabled','disabled');
        setTimeout(function() {
           $('input[type="button"]').removeAttr('disabled');
        }, 3000);

    });    
});

单击后如何使按钮不可点击？

5 个答案: