Disable Button & Enable After Specified Time - JavaScript

Basic Pattern

// Disable, then re-enable after 5 seconds
const btn = document.getElementById('submit-btn');

btn.addEventListener('click', function() {
  this.disabled = true;

  setTimeout(() => {
    this.disabled = false;
  }, 5000);  // 5000ms = 5 seconds
});

With Countdown Text

function disableWithCountdown(btn, seconds) {
  const originalText = btn.textContent;
  btn.disabled = true;
  let remaining = seconds;

  btn.textContent = `Wait ${remaining}s...`;

  const interval = setInterval(() => {
    remaining--;
    btn.textContent = `Wait ${remaining}s...`;

    if (remaining <= 0) {
      clearInterval(interval);
      btn.disabled = false;
      btn.textContent = originalText;
    }
  }, 1000);
}

// Usage
document.getElementById('send').addEventListener('click', function() {
  sendMessage();
  disableWithCountdown(this, 10);
});

Form Submission (Prevent Double Submit)

document.getElementById('form').addEventListener('submit', function(e) {
  const btn = this.querySelector('button[type="submit"]');
  btn.disabled = true;
  btn.textContent = 'Submitting...';

  // Re-enable after the request completes (or after timeout as safety)
  fetch('/api/submit', {
    method: 'POST',
    body: new FormData(this)
  })
  .then(response => response.json())
  .then(data => {
    btn.textContent = 'Submitted!';
    // Optionally re-enable after delay
    setTimeout(() => {
      btn.disabled = false;
      btn.textContent = 'Submit';
    }, 3000);
  })
  .catch(() => {
    btn.disabled = false;
    btn.textContent = 'Try Again';
  });

  e.preventDefault();
});

jQuery Version

$('#btn').on('click', function() {
  var $btn = $(this);
  $btn.prop('disabled', true).text('Please wait...');

  setTimeout(function() {
    $btn.prop('disabled', false).text('Click Me');
  }, 5000);
});

Styling Disabled Buttons

/* CSS for disabled state */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;  /* prevents hover effects */
}

button:disabled:hover {
  background: inherit;  /* no hover effect */
}

/* With transition */
button {
  transition: opacity 0.3s ease;
}
button:disabled {
  opacity: 0.4;
}

Cooldown / Rate Limiting Pattern

class CooldownButton {
  constructor(element, cooldownMs = 5000) {
    this.el = element;
    this.cooldown = cooldownMs;
    this.originalText = element.textContent;
    this.el.addEventListener('click', () => this.handleClick());
  }

  handleClick() {
    if (this.el.disabled) return;
    this.el.disabled = true;
    let sec = Math.ceil(this.cooldown / 1000);
    this.el.textContent = `Cooldown ${sec}s`;

    const id = setInterval(() => {
      sec--;
      this.el.textContent = sec > 0
        ? `Cooldown ${sec}s`
        : this.originalText;
      if (sec <= 0) {
        clearInterval(id);
        this.el.disabled = false;
      }
    }, 1000);
  }
}

new CooldownButton(document.getElementById('action'), 10000);