The HTML DOM Fieldset disabled property is used for disabling the group of elements that are present inside a given fieldset. If this property is set to true then the elements are disabled else they are enabled, which is by default as well. Disabled elements are rendered in grey by default by browsers and users can’t click or write in those elements.
Syntax
Following is the syntax −
To set the disabled property −
fieldsetObj.disabled = true|false
To return the disabled property −
fieldsetObj.disabled
Example
Let us look at an example for the Fieldset disabled property −
<!DOCTYPE html>
<html>
<head>
<script>
function FieldDisable() {
document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
document.getElementById("FieldSet1").disabled = false;
}
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form>
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldEnable()">Enable</button>
<button onclick="FieldDisable()">Disable</button>
<p>Click on the enable button to enable the fieldset and disable to disable the fieldset</p>
</body>
</html>Output
This will produce the following output −
On clicking the Disable button −
In the above example −
We have first created a form which has elements grouped using the <fieldset> element having the id attribute set to “Fieldset1” −
<form> <fieldset id="FieldSet1"> <legend>User Data:</legend> Name: <input type="text"><br> Address: <input type="text"><br> Age: <input type="text"> </fieldset> </form>
We have then created two buttons “Enable” and “Disable” that will execute the FieldEnable() and FieldDisable() functions respectively −
<button onclick="FieldEnable()">Enable</button> <button onclick="FieldDisable()">Disable</button>
The fieldEnable() and FieldDisable() function sets the fieldset disabled property to true and false respectively. This allows us to enable or disable those elements present inside the specified fieldset −
function FieldDisable() {
document.getElementById("FieldSet1").disabled = true;
}
function FieldEnable() {
document.getElementById("FieldSet1").disabled = false;
}