You can disable any HTML button with JavaScript, by setting its disabled property to true. Let’s see how you can locate a specific button and prevent clicks by disabling it.

The basic usage algorithm to disable the HTML button with JS goes like this:

  1. Locate the button
  2. Set its property disabled equal to true
const button = document.getElementById("myButtonId");

button.disabled = true;

So, imagine you have some button, and you’d like to make it disabled before something happens.

Actually, let’s start with two buttons.

When you click the first button, the second one becomes disabled or enabled based on its current state.

So, let’s create 2 regular HTML buttons.

<body>
  <button id="one">ONE</button>
  <button id="two">TWO</button>
</body>

Nothing happens if you click them, as we’re yet to add the onClick handlers.

<head>
  <script>
    function changeButtonState(buttonId) {
      const button = document.getElementById(buttonId);
      button.disabled = !button.disabled;
    }
  </script>
</head>

<body>
  <button id="flipper" onclick="changeButtonState(`target`)">FLIP IT!</button>
  <button id="target">TARGET</button>
</body>

When you click the flipper button, the state of the target button will flip from disabled to enabled.