Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to disable button element dynamically using JavaScript?
In this article, we will learn how to disable button HTML elements dynamically using JavaScript, with the help of the "disabled" attribute.
The "disabled" attribute in HTML button elements accepts a boolean value (true or false), and depending on the value, it disables the button and makes it non-functional, i.e., not clickable. We can use this attribute to disable any button in HTML by setting the "disabled" attribute to "true".
Syntax
<button disabled="true">Disabled Button</button>
In JavaScript, you can disable a button dynamically by setting the disabled property:
// Disable button button.disabled = true; // Enable button button.disabled = false;
Example 1: Static Disabled Button
In this example, we will create a button element that is disabled by default using the "disabled" attribute.
<html lang="en"> <head> <title>How to disable button element dynamically using JavaScript?</title> </head> <body> <h3>Static Disabled Button Example</h3> <button id="btn" disabled="true">Disabled button</button> </body> </html>
Example 2: Dynamic Enable/Disable with Buttons
In this example, we will dynamically disable and enable an HTML button element with 2 separate buttons to enable and disable the button respectively.
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>Dynamic Enable/Disable Button Example</h3>
<button id="btn-p">Enabled button</button>
<div style="display: flex; gap: 10px; margin-top: 10px;">
<button id="enable">Enable</button>
<button id="disable">Disable</button>
</div>
<script>
const btn = document.getElementById("btn-p");
const enableBtn = document.getElementById("enable");
const disableBtn = document.getElementById("disable");
enableBtn.addEventListener("click", () => {
btn.disabled = false;
btn.textContent = "Enabled button";
});
disableBtn.addEventListener("click", () => {
btn.disabled = true;
btn.textContent = "Disabled button";
});
</script>
</body>
</html>
Example 3: Time-Based Button Disable
In this example, we will disable a button element after a certain period of time (5 seconds) has elapsed since the page loaded. We can use the setTimeout() function to delay the execution of a function for a specified amount of time (in milliseconds).
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>Time-Based Button Disable Example</h3>
<button id="btn">This button will be disabled in 5 seconds</button>
<script>
const btn = document.getElementById("btn");
setTimeout(() => {
btn.disabled = true;
btn.textContent = "Button disabled after 5 seconds";
}, 5000);
</script>
</body>
</html>
Example 4: Form Submission Button Disable
In this example, we will disable a button element when a form is submitted. This prevents double-submission and improves user experience. We can use the onsubmit event to execute a function when a form is submitted.
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>Form Submission Button Disable Example</h3>
<form onsubmit="disableButton(event)">
<input type="text" name="input" placeholder="Enter some text" required />
<button type="submit" id="btn">Submit</button>
</form>
<script>
function disableButton(event) {
event.preventDefault(); // Prevent actual form submission for demo
const btn = document.getElementById("btn");
btn.disabled = true;
btn.textContent = "Submitting...";
// Re-enable after 3 seconds for demo purposes
setTimeout(() => {
btn.disabled = false;
btn.textContent = "Submit";
}, 3000);
}
</script>
</body>
</html>
Common Use Cases
Button disabling is commonly used for:
- Preventing double-clicks: Disable submit buttons after form submission
- Loading states: Show user that an operation is in progress
- Form validation: Keep buttons disabled until required fields are filled
- Rate limiting: Prevent users from performing actions too frequently
Conclusion
JavaScript provides simple and effective ways to disable button elements dynamically using the disabled property. Whether triggered by user actions, timers, or form events, this technique enhances user experience and prevents unwanted interactions.
3K+ Views
