CODEWITHSUNDEEP
jqueryhtml
Benny
Benny

Reputation: 531

Prevent second button click using jQuery

I have a button on my page. I don't want to do any operation if the user clicks on the button for second time. I have the following code. But it is not working. Can someone help??

      $("#myButton").click(function(){
        var count = 0;
        count++;
        alert("button");
        if(count>1)
          $('#myButton').prop('disabled', true);
     });
     <button type="button" id="myButton" > Click Me </button>

This is the FIDDLE

Upvotes: 2

Views: 4978

Answers (12)

Connar Stone
Connar Stone

Reputation: 429

I have had issues with actually disabling the button particularly when performing a form submission. Because disabling the button prevents further actions, what you might try is adding a class to the button on click that is called "disabled" and then use a handler for the new "disabled" class to prevent default behavior on click using something like:

$(".my_submit_button").click(function(e){
    $(e.target).addClass("disabled");
})

$(".disabled").click(function(e){
    e.preventDefault();
});

This should allow the button to complete any actions from the first click (even if that action was a form submission) while still disallowing any subsequent clicks.

Upvotes: 0

Navin
Navin

Reputation: 604

You're initializing your count var on click of everytime. move this outside and see working

  var count = 0; 
$("#myButton").click(function(){

     count++;
    alert("button");
     if(count>0)
         $('#myButton').prop('disabled', true);
});

JsFiddle

Upvotes: 0

Runny
Runny

Reputation: 9

Try this and pl avoid using just "click" instead use "on", below code show how the click is manipulated by its alternate.

 $("#myButton").on("click" , function(){

      $("#myButton").off("click"); //just off the click event once u click
        var count = 0;
         count++;
        alert("button");
        var isBool = count>1;
        $('#myButton').prop('disabled', isBool);

    });

check the demo here: http://jsfiddle.net/7jCwK/13/

Upvotes: -3

Steven
Steven

Reputation: 1494

Something like this would do that Fiddle

$("#myButton").click(function(){
    alert("button");
    $(this).unbind();
});

Upvotes: 1

Smarth Behl
Smarth Behl

Reputation: 123

Check the fiddle here 

   var count = 0;

   $("#myButton").click(function(){

      count++;

      alert("button");

      if(count>=1)

          $('#myButton').prop('disabled', true);

});

Your variable gets initialized every time a function is called, you can use variable outside function.

Upvotes: 0

Gaurang s
Gaurang s

Reputation: 842

declare

  var count = 0;

outside from click function

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Change this...

  $("#myButton").click(function(){
      var count = 0;
      count++;
      alert("button");
      if(count>1)
          $('#myButton').prop('disabled', true);
  });

to this...

  $("#myButton").one("click", function(){
      alert("button");
  });

That assigns a click event handler that will only fire the first time you click the element, in this case your button.

You could have altered your existing code very minimally to make it work...

  var count = 0;
  $("#myButton").click(function(){
      count++;
      alert("button");
      if(count>0)
          $('#myButton').prop('disabled', true);
  });

The way you had it you were setting count to 0 every time you clicked the button (and also only disabling the button after 2 clicks).

Upvotes: 3

Chetan Gawai
Chetan Gawai

Reputation: 2401

Diasble button once you click button first time

Check the fiddle http://jsfiddle.net/chetangawai/7jCwK/10/

Upvotes: 0

AKD
AKD

Reputation: 3966

var clicked = false;
$("#myButton").click(function(){
    if(!clicked){
        clicked = true;
        alert("button");
        $('#myButton').prop('disabled', true);
    }               
 });

demo: http://jsfiddle.net/7jCwK/6/

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82241

use .one() to bind event to run/execute once. 

 $("#myButton").one('click',function(){
    alert("button");
 });

Working Demo

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

Use off()

$("#myButton").click(function(){
    var count = 0;
    count++;
    alert("button");
    $(this).off('click');

    if(count>1)
      $('#myButton').prop('disabled', true);
});

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

you can use one in jquery for that

$("#myButton").one("click",function(){

It will attach a handler to an event for the element which will executed at most one.

Upvotes: 19

Related Questions