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 Fieldset disabled property
The HTML DOM Fieldset disabled property controls whether form elements inside a fieldset are enabled or disabled. When set to true, all form controls within the fieldset become disabled and appear greyed out. Users cannot interact with disabled elements − they cannot click, type, or select them.
Syntax
Following is the syntax to set the disabled property −
fieldsetObject.disabled = true|false
Following is the syntax to return the disabled property −
fieldsetObject.disabled
Where fieldsetObject is a reference to a fieldset element obtained using methods like getElementById() or querySelector().
Parameters
The disabled property accepts the following boolean values −
true − Disables all form controls within the fieldset
false − Enables all form controls within the fieldset (default)
Return Value
The property returns a boolean value indicating whether the fieldset is disabled (true) or enabled (false).
Example − Disabling and Enabling Fieldset
Following example demonstrates how to disable and enable a fieldset using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Fieldset Disabled Property</title>
<script>
function disableFieldset() {
document.getElementById("userFieldset").disabled = true;
document.getElementById("status").textContent = "Fieldset is DISABLED";
}
function enableFieldset() {
document.getElementById("userFieldset").disabled = false;
document.getElementById("status").textContent = "Fieldset is ENABLED";
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form>
<fieldset id="userFieldset">
<legend>Personal Information</legend>
<p>Name: <input type="text" placeholder="Enter your name"></p>
<p>Email: <input type="email" placeholder="Enter your email"></p>
<p>Age: <input type="number" placeholder="Enter your age"></p>
</fieldset>
</form>
<br>
<button onclick="enableFieldset()">Enable Fieldset</button>
<button onclick="disableFieldset()">Disable Fieldset</button>
<p id="status">Fieldset is ENABLED</p>
</body>
</html>
The output shows a form with input fields inside a fieldset. Clicking "Disable Fieldset" greys out all inputs and prevents interaction −
User Registration Form Personal Information Name: [Input field - enabled/disabled based on button clicks] Email: [Input field - enabled/disabled based on button clicks] Age: [Input field - enabled/disabled based on button clicks] [Enable Fieldset] [Disable Fieldset] Fieldset is ENABLED/DISABLED
Example − Checking Fieldset Status
Following example shows how to check whether a fieldset is currently disabled −
<!DOCTYPE html>
<html>
<head>
<title>Check Fieldset Status</title>
<script>
function checkStatus() {
var fieldset = document.getElementById("myFieldset");
var status = fieldset.disabled;
if (status) {
document.getElementById("result").textContent = "Fieldset is currently DISABLED";
} else {
document.getElementById("result").textContent = "Fieldset is currently ENABLED";
}
}
function toggleFieldset() {
var fieldset = document.getElementById("myFieldset");
fieldset.disabled = !fieldset.disabled;
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Fieldset Status Check</h2>
<form>
<fieldset id="myFieldset">
<legend>Survey Form</legend>
<p>Rating: <input type="range" min="1" max="10"></p>
<p>Comments: <textarea placeholder="Enter comments"></textarea></p>
<p><input type="checkbox"> Subscribe to newsletter</p>
</fieldset>
</form>
<br>
<button onclick="toggleFieldset()">Toggle Fieldset</button>
<button onclick="checkStatus()">Check Status</button>
<p id="result">Click "Check Status" to see current state</p>
</body>
</html>
This example demonstrates how to programmatically check the disabled property and toggle the fieldset state −
Survey Form Rating: [Range slider - enabled/disabled based on state] Comments: [Text area - enabled/disabled based on state] [Checkbox] Subscribe to newsletter [Toggle Fieldset] [Check Status] Fieldset is currently ENABLED/DISABLED
Key Points
Following are the important points about the fieldset disabled property −
When a fieldset is disabled, all form controls inside it become non-interactive
Disabled form elements are visually distinguished by being greyed out
Values from disabled fieldsets are not submitted when the form is posted
The disabled property can be toggled dynamically using JavaScript
Screen readers announce disabled fieldsets as "unavailable" to users
Browser Compatibility
The fieldset disabled property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The visual styling of disabled fieldsets may vary slightly between browsers, but the functional behavior remains consistent.
Conclusion
The HTML DOM Fieldset disabled property provides an effective way to enable or disable groups of form controls simultaneously. Setting disabled = true makes all contained elements non-interactive and excludes their values from form submission, while disabled = false restores normal functionality.
462 Views
