CODEWITHSUNDEEP
jqueryhtmlcss
FlyingCat
FlyingCat

Reputation: 14270

How to disable button click event in my case?

I want to create a timer when user clicks a button

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….
  }

I was hoping to disable the button click event during the 3 second wait time. How do I do this? thanks for the help!

Upvotes: 0

Views: 894

Answers (3)

Vish
Vish

Reputation: 383

Please see the js fiddle example. I understand you mentioned a timer in your question but you can simplify the code by adding the disabled attr on button and enable it only when the checkbox is checked. The current code only activates the button when the checkbox is checked. http://jsfiddle.net/S9Sa5/

I made some adjustments to the 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>

The 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');
    }
});

Upvotes: 0

Rami.Q
Rami.Q

Reputation: 2476

if i missunderstand you, sorry!

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

this means for me, "user waits 3 sec, then button should be enabled", right?

if this is the case, then using setInterval(....) is not correct, bacause, interval means "do some thing EVERY 3 sec"

i would suggest you to do something like this:

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/

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Using native javascript you can easily enable the button 3 seconds after page load:

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

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

JS Fiddle: http://jsfiddle.net/84f9S/

If you just want to block the button for three seconds after a click you can use the following:

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

JS Fiddle: http://jsfiddle.net/84f9S/1/

Upvotes: 1

Related Questions