Disabling links to stop double-clicks in JQuery

How would I disable all links with the button class after they are clicked once? I'd like to be able to do this in one place, and not have to change all of them individually.. any ideas?

So far I got this:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").click(function() { return false; });

but the second event isn't firing..

Solution 1:

This is what I would try:

$("a.button").one("click", function() {
    $(this).click(function () { return false; });
});

Bind all the links with class "button". Run the anonymous function only once (hence "one"), which rebinds the link to return false.

If you want to keep it looking more like what you have, try this:

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

Solution 2:

I have an elegant solution for this if you're using links:

function do_nothing() { 
  return false;
}

// prevent a second click for 10 seconds. :)
$('.prevent_doubleclick').live('click', function(e) { 
  $(e.target).click(do_nothing); 
  setTimeout(function(){
    $(e.target).unbind('click', do_nothing);
  }, 10000); 
});

https://github.com/ssoroka/prevent_doubleclick.js

I'll add support for forms soon.

Solution 3:

Yeah, set a value to keep track of this:

$("a").click(function (){
  if( $(this).data("clicked") ){
    return false;
  }
  $(this).data("clicked", true);
  return true;
});