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
HTML DOM Select disabled Property
The HTML DOM select disabled property is used to get or set whether a dropdown list is disabled or enabled. When a select element is disabled, users cannot interact with it, and it appears grayed out in most browsers.
Syntax
Following is the syntax for getting the disabled property −
object.disabled
Following is the syntax for setting the disabled property −
object.disabled = true | false
Return Value
The disabled property returns a Boolean value −
-
true− The select element is disabled -
false− The select element is enabled
Example − Getting Disabled Status
Following example demonstrates how to check if a select element is disabled −
<!DOCTYPE html>
<html>
<head>
<title>Get Select Disabled Status</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Select Element Status</h2>
<select id="mySelect" disabled>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<button onclick="checkStatus()" style="margin-left: 10px;">Check Status</button>
<p id="result"></p>
<script>
function checkStatus() {
var select = document.getElementById("mySelect");
var status = select.disabled ? "disabled" : "enabled";
document.getElementById("result").innerHTML = "The select element is: " + status;
}
</script>
</body>
</html>
The output shows the current status of the select element −
The select element is: disabled
Example − Toggle Disabled/Enabled
Following example shows how to dynamically enable and disable a select element −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Select Disabled Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; text-align: center; }
.select-container { margin: 20px 0; }
select { padding: 8px; font-size: 16px; }
button { padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; }
.status { font-weight: bold; color: #007bff; margin-top: 10px; }
</style>
</head>
<body>
<h2>Select Disabled Property Demo</h2>
<div class="select-container">
<label>Choose your favorite subject:</label><br>
<select id="subjectSelect">
<option>Physics</option>
<option>Mathematics</option>
<option>Chemistry</option>
<option>Biology</option>
</select>
</div>
<button onclick="toggleDisabled()">Toggle Disable/Enable</button>
<div id="statusMessage" class="status"></div>
<script>
function toggleDisabled() {
var select = document.getElementById("subjectSelect");
var statusDiv = document.getElementById("statusMessage");
if (select.disabled) {
select.disabled = false;
statusDiv.innerHTML = "Select element is now ENABLED";
} else {
select.disabled = true;
statusDiv.innerHTML = "Select element is now DISABLED";
}
}
</script>
</body>
</html>
Initially, the select element is enabled. Clicking the toggle button alternates between disabled and enabled states −
Select element is now DISABLED (Select dropdown appears grayed out and non-interactive) Select element is now ENABLED (Select dropdown appears normal and interactive)
Example − Conditional Enable/Disable
Following example shows how to conditionally enable a select element based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Conditional Select Enable</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin: 15px 0; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select { padding: 8px; font-size: 16px; }
select:disabled { background-color: #f5f5f5; color: #999; }
</style>
</head>
<body>
<h2>Course Registration Form</h2>
<div class="form-group">
<label for="studentName">Enter your name to enable course selection:</label>
<input type="text" id="studentName" oninput="checkName()" placeholder="Your name">
</div>
<div class="form-group">
<label for="courseSelect">Select a course:</label>
<select id="courseSelect" disabled>
<option>-- Choose a course --</option>
<option>Web Development</option>
<option>Data Science</option>
<option>Machine Learning</option>
<option>Mobile Development</option>
</select>
</div>
<script>
function checkName() {
var nameInput = document.getElementById("studentName");
var courseSelect = document.getElementById("courseSelect");
if (nameInput.value.trim().length > 0) {
courseSelect.disabled = false;
} else {
courseSelect.disabled = true;
}
}
</script>
</body>
</html>
The course selection dropdown remains disabled until the user enters their name in the text field.
Browser Compatibility
The disabled property is supported in all major browsers −
| Browser | Version |
|---|---|
| Chrome | All versions |
| Firefox | All versions |
| Safari | All versions |
| Internet Explorer | 6.0+ |
| Opera | All versions |
Key Points
-
When a select element is disabled, it cannot receive focus or user interaction.
-
Disabled select elements are not included in form submissions.
-
The disabled property accepts boolean values:
true(disabled) orfalse(enabled). -
You can check the current disabled state by reading the property value.
-
Disabled elements typically appear grayed out with different styling.
Conclusion
The HTML DOM select disabled property provides a simple way to control user interaction with dropdown lists. It is commonly used in forms to conditionally enable options based on user input or application state. The property returns a boolean value and can be set to true to disable or false to enable the select element.
282 Views
