Question

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

HTML

 <a href='#' id='btn' >click me</a>

的js

  $('#btn').on('click', function(){
           clearInterval(instance.timer);
           var timer=setInterval(function(){Timer()},3000);
   })

 function Timer(){
   //do stuff….
  }

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

Answer 1

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

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

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

JS小提琴： http://jsfiddle.net/84f9S/

如果您只想在点击后按住按钮三秒钟，则可以使用以下内容：

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

JS小提琴： http://jsfiddle.net/84f9S/1/

Answer 2

如果我想念你，抱歉！

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

对我来说这意味着，＆＃34;用户等待3秒，然后按钮应该启用＆＃34;，对吗？

如果是这种情况，那么使用setInterval(....)是不正确的，因为间隔意味着＆＃34;每隔3秒做一些事情＆＃34;

我建议你做这样的事情：

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

    });
});

DEMO： http://jsfiddle.net/LZTuQ/1/

Answer 3

请参阅js小提琴示例。我知道你在问题中提到了一个计时器，但是你可以通过添加禁用的attr on按钮来简化代码，并且只有在选中复选框时才启用它。当前代码仅在选中复选框时激活按钮。 http://jsfiddle.net/S9Sa5/

我对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>

jQuery：

$("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');
    }
});

如何在我的情况下禁用按钮单击事件？

3 个答案: