Jquery 如何在我的案例中禁用按钮单击事件？

我想在用户单击按钮时创建一个计时器

html

---

我希望在3秒钟的等待时间内禁用按钮单击事件。我该怎么做？谢谢你的帮助

使用本机javascript，您可以在页面加载3秒后轻松启用按钮：

document.getElementById("btn").onclick = function(e){
    e.preventDefault();
};

setTimeout(function(){
    document.getElementById("btn").onclick= function(){
        //add implementation
    };
},3000);

JS小提琴：

如果您只想在单击后阻止按钮三秒钟，可以使用以下命令：

var enabled = true;
$("#btn").click(function(){
    if(enabled){
        enabled = false;
        alert("action");
        setTimeout(function(){
            enabled = true;        
        },3000);
    }
});

---

JS Fiddle:

如果我误解了你的意思，对不起

I was hoping to disable the button click event during the 3 second wait time

这对我来说意味着，“用户等待3秒，然后按钮应该被启用”，对吗

如果是这种情况，那么使用

setInterval（..）

是不正确的，因为interval的意思是“每3秒做一件事”

我建议你这样做：

jQuery(document).ready(function($){
    $("#btn").click(function(){
            $(this).prop("disabled",true);
            var btn = $(this);
            setTimeout(function(){
                       btn.prop("disabled",false);
            },3000);

    });
});

---

演示：

请参见js小提琴示例。我知道您在问题中提到了计时器，但您可以通过添加禁用的attr on按钮来简化代码，并仅在选中复选框时启用它。当前代码仅在选中复选框时激活按钮。

我对html做了一些调整

<div>
    <input type="checkbox" id="TermsandConditions" name="TermsandConditions" />
    <label for="TermsandConditions" class='ff-label' style='display:inline; color:#990000'><strong>I have read and agree to the Terms of Use.</strong>
    </label>
    <br />
    <input type="button" id="submitbutton" name="submit" type="submit" value="Submit" disabled="true" />
</div>

---

您需要在设置间隔之前触发某种类型的事件，然后在间隔之后触发另一种类型的事件。如果您将它放在同一个方法中，那么在您离开该方法之前，它将禁用、运行计时器并启用。因此，单击“禁用”，设置间隔，然后启动计时器。计时器过期时，您需要另一个事件来触发，以重新启用按钮。@FlyingCat是否要在页面加载后禁用单击三秒，或在首次单击后禁用单击三秒？

jQuery(document).ready(function($){
    $("#btn").click(function(){
            $(this).prop("disabled",true);
            var btn = $(this);
            setTimeout(function(){
                       btn.prop("disabled",false);
            },3000);

    });
});

<div>
    <input type="checkbox" id="TermsandConditions" name="TermsandConditions" />
    <label for="TermsandConditions" class='ff-label' style='display:inline; color:#990000'><strong>I have read and agree to the Terms of Use.</strong>
    </label>
    <br />
    <input type="button" id="submitbutton" name="submit" type="submit" value="Submit" disabled="true" />
</div>

$("input").on('click', function () {
    $this = $(this);
    var submitbutton = $("#submitbutton");
    if (!$this.is(":checked")) {
        alert("Please check the agreement check box");
        submitbutton.attr('disabled', 'true');
    } else {
        submitbutton.removeAttr('disabled');
    }
});