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.
 

 

29 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
  9. Excellent piece of information, I had come to know about your website,i have read some posts of yours by now, and let me tell you, your site gives the best and the most interesting information.Java is a dynamic programming language specially designed for use in the assigned environment of the InternetReadmore..

    ReplyDelete
  10. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    python training in chennai

    python training in bangalore

    python online training

    python training in pune

    ReplyDelete
  11. Thanks a lot for sharing us about this update. Hope you will not get tired on making posts as informative as this. 
    java training in chennai | java training in bangalore

    java online training | java training in pune

    java training in chennai | java training in bangalore

    ReplyDelete
  12. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune
    Data science training in kalyan nagar
    Data Science with Python training in chenni

    ReplyDelete
  13. hi, nice information is given in this blog. Thanks for sharing this type of information, it is so useful for me. nice work keep it up. best sap simple finance online training institute in hyderabad


    ReplyDelete
  14. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..

    rpa training in Chennai

    rpa training in anna nagar | rpa training in marathahalli

    rpa training in btm | rpa training in kalyan nagar

    rpa training in electronic city | rpa training in chennai

    rpa online training | selenium training in training

    ReplyDelete
  15. 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. 
    Python training in usa
    Python training in marathahalli
    Python training in pune

    ReplyDelete
  16. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    DevOps online Training
    DevOps Training in USA

    ReplyDelete
  17. I love the blog. Great post. It is very true, people must learn how to learn before they can learn. lol i know it sounds funny but its very true. . .


    angularjs Training in bangalore

    angularjs Training in btm

    angularjs Training in electronic-city

    angularjs Training in online

    angularjs Training in marathahalli

    ReplyDelete
  18. Your new valuable key points imply much a person like me and extremely more to my office workers. With thanks from every one of us.

    Best AWS Training in Chennai | Amazon Web Services Training in Chennai

    AWS Training in Bangalore | Amazon Web Services Training in Bangalore

    Amazon Web Services Training in Pune | Best AWS Training in Pune


    Your new valuable key points imply much a person like me and extremely more to my office workers. With thanks from every one of us.

    ReplyDelete
  19. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    python training in pune
    python training institute in chennai
    python training in Bangalore

    ReplyDelete
  20. Great content thanks for sharing this informative blog which provided me technical information keep posting.
    Blueprism training in Pune

    Blueprism training in Chennai

    ReplyDelete
  21. The knowledge of technology you have been sharing thorough this post is very much helpful to develop new idea. here by i also want to share this.
    Devops Training in pune

    ReplyDelete

  22. I’m planning to start my blog soon, but I’m a little lost on everything. Would you suggest starting with a free platform like Word Press or go for a paid option? There are so many choices out there that I’m completely confused. Any suggestions? Thanks a lot.
    Best AWS Training in Marathahalli | AWS Training in Marathahalli
    Amazon Web Services Training in Anna Nagar, Chennai |Best AWS Training in Anna Nagar, Chennai

    ReplyDelete