How to enable/disable an html button based on scenarios?

Question

I have a button in my webpage with below code -

HTML:

Answer 1

You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.

Simply use the disabled attribute:

And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:

const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');

if (disableButton) button.disabled = "disabled";

.checkout-button {
  width: 130px;
  height: 35px;
  background: #333;
  border: none;
  vertical-align: top;
  margin-left: 35px;
  cursor: pointer;
  color: #fff;
}

.checkout-button:disabled {
  background: #999;
  color: #555;
  cursor: not-allowed;
}

submit