Disable a Button with JavaScript
FREE
Overview
Many times in our program, we may need to disable or enable a button in our webpage based on certain conditions being fulfilled or not, and for that, we must be aware about the ways how to do it.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Introduction
The button element is one of the few elements in HTML that can have its state, i.e., either being enabled to accept a click or it could be disabled.
For example - Suppose we are asking the user to fill out a form on our website, and we only want to enable the submit button when the user has clicked on the 'They have read the terms and conditions' option, or they have filled some mandatory input field. So in order to do that, we have a particular property associated with every button element in HTML, the disabled property. We can use the disabled property to toggle the state of a button's activeness to be either true or false, and through this, we can enable or disable a button.
Let's understand it better with the help of an example.
Program to Disable a Button Using Javascript Disable Button Property
The disabled property in JavaScript is a property associated with every button element, and in order to make it work, we first need to capture that specific button that we want to target through either the querySelector, the getElementById method, the getElementByClassName method, the getElementByTagName method or any other element selector method that we want to use.
After having the button, we can now use the disabled property to make its state active or inactive. To make it inactive, we can set its value to true.
And to make it active again, we can simply set its value to false.
We will not be hardcoding enabling or disabling buttons like this in actual programs; we want this to happen automatically when a specific condition is being met.
Now let's see an example to understand it better.
Examples of JavaScript Disable Button
Turn Learning into Career Growth
Example 1 - Basic Implementation of the Javascript Disable Button property
Output before clicking the button
Output after clicking the button
We can see that after clicking the button, the disableButton() function got executed, and it made the button's background gray out, denoting it is now not clickable, i.e., the button is disabled now.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
Example 2 - Implementing the Javascript Disable Button Property into an Actual form Element
Output before selecting checkbox
Output after selecting checkbox
We can see here the submit button is disabled by default, and it gets clickable only after the user has selected the required checkbox.
Your journey to becoming a certified JavaScript developer starts here. Enroll in Scaler Topics course and set yourself on the path to a rewarding coding career.
Conclusion
- Every button element in HTML has a property named disabled to toggle its state of activeness and inactiveness.
- For that, we first need to capture that specific button using query selectors, and after that,
- We can set the button.disabled = true; to disable that button and button.disabled = false; to enable it back again.
- We can use this implementation to make a button active or inactive based on certain specific conditions being met or not, for example - enabling the submit button only if the user has filled all the mandatory fields, etc.
See Also:
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more