All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Disable Button In JavaScript

Last Updated : Mar 11, 2024

How To Disable Button In JavaScript

In this tutorial we will show you the solution of how to disable button in JavaScript, in previous tutorial, we understand about disabling and enabling of a button in JavaScript.

Now, in this tutorial we will understand how to disable a button. Let us understand this article with example also.

As, there are many ways with the help of which we are able to disable a button using JavaScript.

Step By Step Guide On How To Disable Button In JavaScript :-

Here, below the code is given with help of which we will understand this concept. Let us see the code first and then understand it step by step.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
<body style="text-align:center;margin:0;">
 <h1 style="color: red;">
  Let us understand how to disable a button with help of JavaScript
 <!-- create a button, assigning id to button and apply function also. -->
 <button id="Btn" onclick="btnfnc()">
 <p id="demo"></p>
  function btnfnc() {
    .disabled = "true";
    .innerHTML = "Button is Disabled";
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
  5. Here, we want to first say that the code is too easy, let us understand this. Here, first of all we create a heading there and then create a button the value of button is submit.
  6. Its id is Btn and on click a function runs that’s name is btnfnc. You can see comment given in code for better understanding.
  7. Then we create a paragraph with id demo. We will use it later in script. Let us understand script.
  8. Script is a paired tag, and we use or write our JavaScript code inside this pair of tags.
  9. After this we create a function which we want to call on button click. And inside this we disable a button with .disable = true property. If you want to enable button then give value false there. After this we use script in our paragraph with id demo. And assign some text to it.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we are able to understand how to disable a button using JavaScript.

I hope this tutorial on how to disable button in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪