CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

How to make click event non-clickable for user for a few seconds?

How to make click event non-clickable for user for a few seconds once the user has clicked the button?

For eg.

$('button').on('click',function(){
alert('you clicked');
}

It alerts every time. But I want to make that button something else whatever that I've assigned the click event on, here in example, if the user clicks again within next 20 seconds it should not work and after 20 seconds the button should be clickable that is if the user clicks after 20 seconds it alerts again.

Upvotes: 0

Views: 398

Answers (4)

user1790464
user1790464

Reputation: 544

You can try this

var seconds = 5; //seconds to disable a button
$('#yourbutton').click(function(){ //yourbutton is the id of button
    var btn = $(this);
    btn.prop('disabled', true);  //disables the buttons
    setTimeout(function(){  //renable the button after seconds specified
        btn.prop('disabled', false);
    }, seconds*1000);
});

Upvotes: 0

Banana-In-Black
Banana-In-Black

Reputation: 2557

http://jsfiddle.net/bzY62/

$('button').on('click', function(){
    var _$this = $(this);

    if(!_$this.data('blocked')) {
        alert('you clicked');

        _$this.data('blocked', true);

        setTimeout(function() {
           _$this.data('blocked', false);
        }, 5000); // in miliseconds
    }
});

Upvotes: 1

griffon vulture
griffon vulture

Reputation: 6764

 $('button').on('click',function(){
  alert('you clicked');
  $(this).prop("disabled", true);
  setTimeout( function(){$(this).prop("disabled", false);},20000 );
 }

Upvotes: 2

sdespont
sdespont

Reputation: 14025

Not tested but :

var isClickable = true;
$('button').on('click',function(){
    //Exit if not clickable
    if(!isClickable)
        return false;

    //Set not clickable
    isClickable = false;
    //And finally plan to reset clickable in 20 seconds 
    setTimeout(function(){isClickable=true;},20000);

    //Then, your code
    alert('you have just clicked');
}

Upvotes: 1

Related Questions