In this tutorial, we will learn how to make checkbox disabled in HTML. The checkbox is displayed as a square box. The users can choose one or more options from a constrained set of possibilities by using checkboxes. When you are creating a form, you may want to disable some of the checkboxes that you are constructing for specific purposes.
To make the checkbox disabled, we have to use the HTML
disabled attribute. The
disabled attribute is used to specify that the input element should be disabled so that a user could not enter any value in it.
In the following example, we have 3 checkboxes and we will disable all of them. Please have a look over the code example and the steps given below.
- In the HTML file, we have multiple elements such as
input. The parent
div element is just a wrapper for the rest of the elements.
h2 are heading tags with some text content.
- We have 3 inputs with a type value set to
disabled attribute, which specifies that the input element is disabled and could not be checked.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div><input type="checkbox" name="hobbies" disabled>Dancing</div>
<div><input type="checkbox" name="hobbies" disabled>Reading</div>
<div><input type="checkbox" name="hobbies" disabled>Singing</div>