HTML DOM Input Checkbox disabled Property


The HTML DOM Input Checkbox disabled property sets/returns whether Input Checkbox is to be enabled or disabled.

Syntax

Following is the syntax −

  • Returning boolean value − true/false
inputCheckboxObject.disabled
  • Setting disabled to booleanValue
inputCheckboxObject.disabled = booleanValue

Boolean Values

Here, “booleanValue” can be the following −

booleanValueDetails
trueIt defines that the checkbox is disabled.
falseIt defines that the checkbox is not disabled and it is also the default value.

Example

Let us see an example of Input Checkbox disabled property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<form>
<div>
<input id="fullname" placeholder="eg: John Doe" type="text" name="fullname">
</div>
<div>
Biology: <input class="category" type="checkbox" value="Biology" name="subject" disabled>
Mathematics: <input class="category" type="checkbox" value="Mathematics" name="subject" disabled>
Physics: <input class="category" type="checkbox" value="Physics" name="subject" disabled>
Psychology: <input class="category" type="checkbox" value="Psychology" name="subject" disabled>
</div>
</form>
<button onclick="enableCheckboxes()">Enable Subjects</button>
<script>
   function enableCheckboxes(){
      var enableCheckboxes = document.getElementsByClassName("category");
      for (var i = 0; i < enableCheckboxes.length; i++) {
         enableCheckboxes[i].disabled = false;
      }
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Enable Subjects’ button −

After clicking ‘Enable Subjects’ button −

Updated on: 30-Jul-2019

682 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements