How to Disable a Button After Click in JavaScript?

To disable a button after click in JavaScript, you can use the disabled attribute. If the disabled attribute is set to true, the button becomes disabled and if it is set to false the button becomes enabled.

Let’s say we have the following button in HTML:

<button id='btn' onclick='disableBtn()'>Click Me</button>

Whenever the above button is clicked, the disableBtn() function gets fired where we will explicitly set the button’s disabled attribute to true.

Here is the related JavaScript code for it:

Example:

function disableBtn(){
    document.getElementById('btn').disabled = true;
}

Disable Button with addEventListener() Method:

You can also use the addEventListener() method of the DOM to disable a button after a click. Here, you don’t have to specify any explicit function in the HTML document as we did in our previous example i.e. onclick=’disableBtn()’

Here is the updated HTML:

<button id='btn'>Click Me</button>

And here is the updated JavaScript code with addEventListener:

Example:

var button = document.getElementById('btn');
button.addEventListener('click', function(event){
   event.target.disabled = true; 
});

Disable Multiple Buttons after Clicking:

If you have multiple buttons on a page and you want to disable them after clicking, you can use the same concept that we have discussed above.

First, you have to select the buttons with any DOM method such as getElementsByTagName(). This will return you an array of all the buttons.

You can then loop through each of them and add the addEventListener() method to listen to the click event and simply set the disabled attribute to true whenever the button is clicked.

See the implementation below:

Example:

var buttons = document.getElementsByTagName('button');
for(let i=0;i<buttons.length;i++){
    buttons[i].addEventListener('click', function(event){
        event.target.disabled = true;
    });
}

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts