JavaScript- Disable and Enable Button in JS Last Updated : 28 Nov, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report These are the following approaches to Disable and enable a Button in JavaScript:1. Using the disabled Attribute The code example toggles the 'myButton' state between enabled and disabled using the 'toggleButton'. Clicking the 'toggleButton' triggers the 'toggleButtonState' function, which checks if 'myButton' is disabled. If it is, the button is enabled, and the 'toggleButton' text changes to "Disable Button." If it’s enabled, the button is disabled, and the text updates to "Enable Button," providing dynamic and intuitive control. HTML <!DOCTYPE html> <html lang="en"> <body> <button id="myButton">Click Me</button> <button id="toggleButton" onclick="toggleButtonState()"> Disable Button </button> <script> // Function to toggle the button state function toggleButtonState() { const button = document.getElementById('myButton'); const toggleBtn = document.getElementById('toggleButton'); if (button.disabled) { button.disabled = false; toggleBtn.innerText = "Disable Button"; } else { button.disabled = true; toggleBtn.innerText = "Enable Button"; } } </script> </body> </html> 2. Toggling the Disabled State DynamicallyWe have used two separate checkboxes to enable or disable a button. Selecting one checkbox automatically unchecks the other to avoid conflicts. The 'toggleEnableDisable' function updates the button's 'disabled' property based on which checkbox is checked, ensuring clear and independent control over the button's state. HTML <!DOCTYPE html> <html lang="en"> <body> <label> <input type="checkbox" id="enableCheckbox" onchange="toggleEnableDisable('enable')"> Enable Button </label> <br> <label> <input type="checkbox" id="disableCheckbox" onchange="toggleEnableDisable('disable')"> Disable Button </label> <br><br> <button id="toggleButton" disabled> Click Me </button> <script> // Function to enable or disable the button function toggleEnableDisable(action) { const button = document.getElementById('toggleButton'); const enableCheckbox = document.getElementById('enableCheckbox'); const disableCheckbox = document.getElementById('disableCheckbox'); if (action === 'enable') { button.disabled = false; disableCheckbox.checked = false; // Uncheck the disable checkbox } else if (action === 'disable') { button.disabled = true; enableCheckbox.checked = false; // Uncheck the enable checkbox } } </script> </body> </html> ConclusionDisabling buttons in JavaScript provides a flexible way to control user interaction and enhance web applications. Whether it's a simple toggle, a dynamic state change, or form-based validation, these approaches can be adapted to meet a variety of use cases. Understanding how to manipulate the disabled attribute allows developers to create a smoother and more controlled user experience. Comment More infoAdvertise with us Next Article How to enable/disable a button using jQuery ? P pankaj2025 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to enable/disable a button using jQuery ? Enabling/disabling a button using jQuery involves altering its functionality to either accept user input or not. This is typically done by manipulating its 'disabled' property or attribute through jQuery methods like `.prop()` or .attr().To enable/disable a button using jQuery, you'll need a basic H 2 min read How to Disable a Button Conditionally in JavaScript? In JavaScript, you can conditionally disable buttons based on specific criteria to control user interactions. Using simple if-else statements or event listeners, you can dynamically enable or disable buttons depending on form validation, user actions, or other conditions. This helps regulate the ava 3 min read How to Disable a Button in React JS ? Disabling a button in React JS means making it unclickable and visually indicating its unavailability. This is done by setting the button's disabled attribute to true. It's used for controlled interactions, like form submissions with valid data.A disabled button becomes unclickable and visually sign 4 min read How to Disable Button Element Dynamically using JavaScript? The disabled property in the HTML DOM is used to control the interactivity of a button element. When this property is set, the button becomes unclickable and inactive, effectively preventing any user interaction. This property accepts a boolean value, allowing developers to dynamically enable or dis 1 min read How to disable radio button using JavaScript ? Radio buttons let users select one option from many, commonly used in forms. Sometimes, based on a user's previous choice, certain options need to be disabled. For example, if a user selects "No" to playing games, we can disable related game options. Using JavaScript, about 65% of forms use such log 4 min read How to Disable a Button in jQuery UI ? To disable a button in jQuery UI, we will be using disable() method which is discussed below: jQuery UI disable() method is used to completely disable the button. It returns the button element completely to its initial state. Syntax: $(".selector").button("disable") Parameters: This method does not 2 min read Like