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.
 

 

9 comments:

  1. JavaScript is the language future. The new JavaScript Version (Ecmascript 6) has been relaeased.

    JavaScript Online Training

    Javascript Online Training

    ReplyDelete
  2. I have read your blog and i got a very useful and knowledgeable information from your blog.You have done a great job . If anyone want Java Training in Chennai, Please visit our page Java Training in Chennai

    ReplyDelete
  3. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog...Java Training in Chennai

    ReplyDelete
  4. Thanks for your Blog i thinking is very useful.Any one want Learn the Java Training in Chennai.

    Thanks For sharing...Any one want Learn the Java Training in ChennaiJava Course Training

    Thanks For sharing...Any one want Learn the Java Training in ChennaiJ2EE Course Training

    ReplyDelete
  5. Thanks for your sharing to spread out your knowledge<a href="http://www.trainingintambaram.net/j2ee-training-in-chennai/>J2EE Training in Chennai</a>

    ReplyDelete
  6. Thanks for your sharing to spread out your knowledgeJ2EE Training in Chennai

    ReplyDelete
  7. Hello,
    Nice blog very well defined stuff you given thanks for sharing. Here i am also Sharing Information on Java 2 Platform Enterprise Edition Training. It will Definately useful for Everyone.

    ReplyDelete
  8. Thanks for splitting your comprehension with us. It’s really useful to me & I hope it helps the people who in need of this vital information. Java Training in Chennai

    ReplyDelete