HTML | DOM Input Checkbox disabled Property - GeeksforGeeks

06 Mar, 2019
The Input Checkbox disabled property in HTML DOM is used to set or return whether the Input Checkbox field must be disabled or not. A disabled checkbox is unclickable and unusable. It is a boolean attribute and used to reflect the HTML Disabled attribute.
Syntax:
It returns the Input Checkbox disabled property.checkboxObject.disabled
checkboxObject.disabled
It is used to set the Input Checkbox disabled property.checkboxObject.disabled = true|falseProperty Values: It contains two property values which are listed below:true: It defines that the checkbox is disabled.False: It has the default value. It defines that the checkbox is not disabled.Return Value: It returns a boolean value which represents the checkbox is disabled or not.Example 1: This example sets the Input Checkbox disabled property.<!DOCTYPE html> <html>     <head>         <title>            DOM Input Checkbox disabled Property        </title>     </head>           <body style="text-align:center;">               <h1 style="color:green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox disabled Property</h2>                  <form id="myGeeks">                       <!-- Below input elements have attribute                checked -->            <input type="checkbox" name="check" id="GFG"                    value="1" disabled>Checked by default<br>                                  <input type="checkbox" name="check" value="2">                    Not checked by default<br>         </form><br>                  <button onclick="myGeeks()">            Submit        </button>                  <!-- Script to disable checkbox -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").disabled                        = false;            }        </script>    </body> </html>                                Output:Before clicking on the Button:After clicking on the Button:Example 2: This example returns the Input Checkbox disabled property.<!DOCTYPE html> <html>     <head>         <title>            DOM Input Checkbox disabled Property        </title>     </head>           <body style="text-align:center;">               <h1 style="color:green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox disabled Property</h2>                   <form id="myGeeks">                           <!-- Below input elements have attribute                checked -->            <input type="checkbox" name="check" id="GFG"                     value="1" disabled>Checked by default<br>                                   <input type="checkbox" name="check" value="2">                    Not checked by default<br>         </form><br>                  <button onclick="myGeeks()">            Submit        </button>                  <p id="sudo" style="color:green;font-size:25px;"></p>                  <!-- Script to return Input Checkbox disabled Property -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").disabled;                document.getElementById("sudo").innerHTML = g;            }        </script>    </body> </html>                              Output:Before clicking on the Button:After clicking on the Button:Supported Browsers: The browser supported by DOM input Checkbox disabled property are listed below:Google ChromeInternet ExplorerFirefoxOperaSafariAttention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
checkboxObject.disabled = true|false
Property Values: It contains two property values which are listed below:
true: It defines that the checkbox is disabled.
False: It has the default value. It defines that the checkbox is not disabled.
Return Value: It returns a boolean value which represents the checkbox is disabled or not.
Example 1: This example sets the Input Checkbox disabled property.
<!DOCTYPE html> <html>     <head>         <title>            DOM Input Checkbox disabled Property        </title>     </head>           <body style="text-align:center;">               <h1 style="color:green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox disabled Property</h2>                  <form id="myGeeks">                       <!-- Below input elements have attribute                checked -->            <input type="checkbox" name="check" id="GFG"                    value="1" disabled>Checked by default<br>                                  <input type="checkbox" name="check" value="2">                    Not checked by default<br>         </form><br>                  <button onclick="myGeeks()">            Submit        </button>                  <!-- Script to disable checkbox -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").disabled                        = false;            }        </script>    </body> </html>                                
Output:Before clicking on the Button:After clicking on the Button:
Example 2: This example returns the Input Checkbox disabled property.
<!DOCTYPE html> <html>     <head>         <title>            DOM Input Checkbox disabled Property        </title>     </head>           <body style="text-align:center;">               <h1 style="color:green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox disabled Property</h2>                   <form id="myGeeks">                           <!-- Below input elements have attribute                checked -->            <input type="checkbox" name="check" id="GFG"                     value="1" disabled>Checked by default<br>                                   <input type="checkbox" name="check" value="2">                    Not checked by default<br>         </form><br>                  <button onclick="myGeeks()">            Submit        </button>                  <p id="sudo" style="color:green;font-size:25px;"></p>                  <!-- Script to return Input Checkbox disabled Property -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").disabled;                document.getElementById("sudo").innerHTML = g;            }        </script>    </body> </html>                              
Output:Before clicking on the Button:After clicking on the Button:
Supported Browsers: The browser supported by DOM input Checkbox disabled property are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript