This script is triggered once. When clicked, the button is locked. CSS properties apply. After 5 seconds, the button is automatically unlocked. But on subsequent clicks the script does not block the button and the css properties do not apply.

function timerBlock() { $(this).prop('disabled', 'false').css('cursor', 'pointer'); console.log('Кнопка разблокирована'); } $("#one-form-line").click(function() { $(this).prop('disabled', 'true').css('cursor', 'not-allowed'); console.log('Кнопка заблокирована'); setTimeout(timerBlock, 5000); });

1 answer 1

In fact, the Internet is full of ready-made solutions, both on jQuery and on pure JavaScript:

 $("#btn").on("click", function(){ var $self = $(this); $self.attr("disabled","disabled"); setTimeout(function(){ $self.removeAttr("disabled"); }, 5000); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btn">Click me</button>

The same on pure javascript:

 document.getElementById("btn").addEventListener("click", function(){ document.getElementById("btn").disabled = true; setTimeout(function() { document.getElementById("btn").disabled = false; }, 5000); }); 
 <button id="btn">Click me</button>