How to enable/disable button/dropdown using DOM/JavaScript.

One of the most and highly used DOM component is - "document".
In this example we are going to cover how to use the DOM object and we are going to disable/enable the HTML button and dropdown.
Let's write the sample HTML code which has the button and the dropdown element.

disableButton.html

<html>
   <head>
      <script src = "test.js"></script>
   </head>
   <body style="background-color:#F2F2F2;">
      <button id="btn01">OK</button>
      <button onclick="disableElement()">Disable</button>
      <button onclick="enableElement()">Enable</button>
      
      <select id="mySelect">
         <option>Java</option>
         <option>.Net</option>
         <option>PHP</option>
         <option>JavaScript</option>
      </select>
      
      <input type="button" onclick="disable()" value="Disable list" />
      <input type="button" onclick="enable()" value="Enable list" />
   </body>
</html>

Now that we are done with the sample HTML, let's write the JavaScript functions which will enable and disable the button and dropdown element.

test.js

function disableElement() {
    document.getElementById("btn01").value = "Disabled";
    document.getElementById("btn01").disabled = true;
}

function enableElement() {
    document.getElementById("btn01").value = "OK";
    document.getElementById("btn01").disabled = false;
}

function disable() {
    document.getElementById("mySelect").disabled = true;
}

function enable() {
    document.getElementById("mySelect").disabled = false;
}
 
The browser will render the above code something like this.