HTML DOM Fieldset disabled property


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 −

Live Demo

<!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;
}

Updated on: 19-Feb-2021

262 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements