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

Question

I have a button in my webpage with below code -

HTML:

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>

CSS:

.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}

Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.

What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:

if flag=1: 
    /* enable the button, and let the user click it and run the php code */
else: 
    /* display this button, but don't let any actions take place if the user clicks on it; */

How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.

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:

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>

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;
}

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>

Answer 2

You can do it either by modifying the attribute or by adding/removing a class.

Modifying attribute

You will want to switch between <button disabled="true"> and <button disabled="false">

With javascript, it could look like this:

if flag=1: 
    document.getElementById("your-btn").disabled = true;
else: 
    document.getElementById("your-btn").disabled = false;

And with jquery, like this:

if flag=1: 
    $('#your-btn').prop('disabled', true);
else: 
    $('#your-btn').prop('disabled', false);

Adding/removing class

Add the following css:

.btn-disabled{
    cursor: not-allowed;
    pointer-events: none;
}

And add/remove a class to the button.

With jquery:

if flag=1: 
    $('#your-btn').addClass('btn-disabled');
else: 
    $('#your-btn').removeClass('btn-disabled');

If you don't want jquery, but pure javascript, here is how to do it.