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.