Disable Submit Button For 4 Hours

by Matthias Schaffer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<button id='myButton'>Click me</button>
<button id='deleteCookie'>Delete Cookie</button>

CSS

#myButton:disabled {
  opacity: 0.5;
  color: red;
}

JavaScript

var timeout = 4 * 60 * 60 * 1000; // 4 Hours * 60 Minutes * 60 Seconds * to Milliseconds
if(Cookies.get('disabledBtn') !== undefined){
  $('#myButton').prop('disabled', true);
  var cookieSet = Cookies.get('disabledBtn');
  var delay = timeout - ($.now() - cookieSet);
  setInterval(function(){
  	$('#myButton').prop('disabled', false); 
  	Cookies.remove('disabledBtn');
  }, delay);
}

$('#myButton').on('click',function(){
  $(this).prop('disabled', true);
  Cookies.set('disabledBtn', $.now());
  
  setInterval(function(){
  	$('#myButton').prop('disabled', false); 
  	Cookies.remove('disabledBtn');
  }, timeout);
});

$('#deleteCookie').on('click',function(){
  	Cookies.remove('disabledBtn');
    location.reload();
});