Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Button Disabled Property
The HTML DOM Button disabled property is associated with disabled attribute of the <button> element .The button disabled property is used to set or return whether a given button is disabled or not. It is used to disable the button so that the user can no longer interact with the specified element. Setting the disabled property will grey the button by default in the web browsers.
Syntax
Following is the syntax for −
Setting the disabled property −
buttonObject.disabled = true|false
Here, the true|false specifies if the given input button should be disabled or not.
- True − The button gets disabled.
- False − The button won’t get disabled.
Let us see an example for the button disabled property −
Example
<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>Click the below button to disable the above button.</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample">
<script>
function buttonDis() {
document.getElementById("Button1").disabled = true;
var x=document.getElementById("Button1").disabled;
document.getElementById("Sample").innerHTML = "Button disabled is "+x;
}
</script>
</body>
</html>
Output
This will produce the following output −
On clicking CLICK IT button −
In the above example −
We have created a button with id “Button1” and the button is by default enabled.
<button id="Button1">BUTTON</button>
We have then created the CLICK IT button to execute buttonDis() method on click.
<button onclick="buttonDis()">CLICK IT</button>
The buttonDis() method gets the button element by its id “button1” and sets the disabled attribute on it to true. After disabling the button its disabled value (true or false) is assigned to the variable x and displayed in the paragraph with id “Sample”
function buttonDis() {
document.getElementById("Button1").disabled = true;
var x=document.getElementById("Button1").disabled;
document.getElementById("Sample").innerHTML = "Button disabled is "+x;
}
1K+ Views
