November 15, 2022

How to Make Checkbox Disabled in HTML

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.

HTML

In the HTML file, we have multiple elements such as div, h3, h2, and input. The parent div element is just a wrapper for the rest of the elements.
The h3 and h2 are heading tags with some text content.

We have 3 inputs with a type value set to checkbox with disabled attribute, which specifies that the input element is disabled and could not be checked.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox disabled</title>
</head>

<body>
    <div>
        <h3>Checkbox disabled</h3>
        <h2>Hobbies</h2>
        <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>
    </div>

</body>
</body>

</html>

You May Also Like: