JavaScript- Disable and Enable Button in JS Last Updated : 28 Nov, 2024 Comments Improve Suggest changes 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 JavaScript- Disable and Enable Button in JS P pankaj2025 Follow Improve Article Tags : Web Technologies JavaScript 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 How to disable or enable form submit button in jQuery? Enabling or disabling the form submit button based on a checkbox selection in jQuery. This ensures user compliance with terms and conditions before form submission. Syntax:$('#enabled').click(function () { if ($('#submit-button').is(':disabled')) { $('#submit-button').removeAttr('disabled'); } else 2 min read How to Disable Input in JavaScript ? Disabling input fields in JavaScript is a common task when you want to restrict users from interacting with specific form elements. This can be useful in various scenarios, such as preventing modifications to fields that are conditionally locked or ensuring certain inputs are controlled programmatic 2 min read How to Disable Submit Button on Form Submit in JavaScript ? Forms are a crucial part of web development as they allow users to submit data to a server. However, sometimes we want to customize the behavior of HTML forms and prevent the default behavior from occurring. This allows you to create a more interactive and user-friendly web application. In this arti 3 min read React Suite Button Disabled React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. In this article, we will be seeing React Suite Button Disabled. The disabled pro 3 min read Like