Fix double click buttons with JQuery

I am performing maintenance on a site with several forms with submit buttons and also normal buttons that call an onclick event that in FORMS is used to perform data validation and in other situations is used to do some action that messes the database.

It is happening that some users who access the site click the button several times to perform some action, which is causing several INSERTS in a row and incorrect before, for example, closing the modal or redirecting to the other page at the end of the script execution.

I want to create a function in my scripts.js so that when any button is clicked, it will get disabled for a few seconds and run what was set directly in the onclick event and then activate it again.

I tried this way but it didn't work out: 

$('button').click(function() {
this.prop('disabled',true);

setTimeout(function(){
this.prop('disabled', false);
}, 5000);
});

I've searched various websites for ways to prevent double clicking, inclusive http://www.the-art-of-web.com/javascript/doublesubmit / which focuses mainly on this subject. However, the ways I've found so far will make me have to go on each button on the site (it should have about 200 buttons, it's great the site) and go putting this disable function one by one.

What should I change to the above code work as I asked?

Author: WitnessTruth, 2017-07-20
Source

2 answers

Try This: 

//Desativar o botão ao clicar
$(":button").click(function() {
  $(this).prop("disabled",true);
});
//Reativar o botão após 3 segundos
$(":button").click(function() {
   var btn = this;
    setTimeout(function() {
      btn.disabled =  false; 
    }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="button" id="botão" value="Enviar">

<input type="button" id="botão2" value="Enviar">

The above code will be applied to all input type="button" existing on the page, but only the button that the user clicks on at that moment will be disabled and, after 3 seconds, the button will be reactivated.

 1
Author: Leandro, 2017-07-20 16:14:45

You can do with jquery as well.

Only in the setTimeout part you can override for your processing that would get 

$.ajax({
  url  : 'seruarquivo.php',
  dataType : 'json',
  type : 'post',
  beforeSend : funcaoqueDesabilita,
  data : {
     parametro : dado
 },
  success : function(data){
      //habilita  novamente
   }  
});

But follow suggestion 

$('button').on('click', function(){
      var botao = $(this);
      botao.prop('disabled', true);
      var texto = botao.find('span').text();
      botao.find('span').text('Aguarde...');
      
      botao.removeClass('btn-primary');
      botao.addClass('btn-danger');
      setTimeout(function(){
         botao.prop('disabled',false);
         botao.removeClass('btn-danger');
         botao.addClass('btn-primary');
         botao.find('span').text(texto);
      },3000
      );
      
      
      
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<button class="btn btn-primary"><span>botao 1</span></button>
<button class="btn btn-primary"><span>Botao 2</span></button>
 1
Author: adventistaam, 2017-07-20 15:36:05