Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
Let’s understand this with the help of some examples −
Example 1
In this example, we will disable a button element by passing the “disabled” attribute to “true”.
Filename: index.html
<html lang="en"> <head> <title>How to disable button element dynamically using JavaScript?</title> </head> <body> <h3>How to disable button element dynamically using JavaScript?</h3> <button id="btn" disabled="true">Disabled button</button> </body> </html>
In this example, we will dynamically disable and enable an HTML button element with 2 separate buttons to enable and disable the button respectively.
Filename: index.html
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>How to disable button element dynamically using JavaScript?</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
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).
Filename: index.html
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>How to disable button element dynamically using JavaScript?</h3>
<button id="btn">Enabled button</button>
<script>
const btn = document.getElementById("btn");
setTimeout(() => {
btn.disabled = true;
btn.textContent = "Disabled button";
}, 5000);
</script>
</body>
</html>
Example 4
In this example, we will disable a button element when a form is submitted. We can use the onsubmit event to execute a function when a form is submitted, and within that function, we can disable the button.
Filename: index.html
<html lang="en">
<head>
<title>How to disable button element dynamically using JavaScript?</title>
</head>
<body>
<h3>How to disable button element dynamically using JavaScript?</h3>
<form onsubmit="disableButton()">
<input type="text" name="input" placeholder="Enter some text" />
<button type="submit" id="btn">Submit</button>
</form>
<script>
function disableButton() {
const btn = document.getElementById("btn");
btn.disabled = true;
btn.textContent = "Disabled button";
}
</script>
</body>
</html>
Conclusion
In this article, we learned how to disable HTML button elements dynamically using javascript, with the help of disabled attribute. We can disable a button by passing the disabled attribute to true, by dynamically changing the value of the disabled attribute, by delaying the execution of a function using the setTimeout() function, or by executing a function when a form is submitted using the onsubmit event.
907 Views
