How to Enable and Disable Checkbox in HTML

1. Checkbox in HTML
2. Use the checked Attribute to Enable a Checkbox by Default in HTML
3. Use the disabled Attribute to Disable a Checkbox by Default in HTML

This article explores ways to enable and disable the checkbox in HTML.

Checkbox in HTML

A checkbox is an interactive box that can be toggled to denote affirmation or negation. It is widely used in forms and dialogue boxes.

Checkboxes are used when there are some options, and the user is free to choose any number of options, including zero. That means checking one doesn’t automatically uncheck the other options.

A checkbox is primarily used when there are options that are not mutually exclusive. A small box appears on the side of each option which can be toggled.

By default, the box is empty. An empty box denotes negation, or the user didn’t choose the option.

When clicked, a checkmark appears inside the box. The check mark indicates an affirmation.

When clicked again, the check mark disappears.

You can create a checkbox in HTML using the <input> tag and setting its type attribute to checkbox. You can write the item name after the <input> tag.

For example, create an unordered list using the ul tag and set style to list-style: none; so that no bullet marks appear with the list items. Create four list items and use the <input type="checkbox"> to create a checkbox for each list item.

Code Example:

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

Each list item will default have the toggle feature in its respective checkbox.

Use the checked Attribute to Enable a Checkbox by Default in HTML

If you need a checkbox where an option is always checked by default, you can implement an attribute to the <input> tag. The attribute to be used is the checked attribute.

You only need to set the attribute’s value to checked to turn it to be checked by default.

For example, for Drink and Repeat options, add the attribute checked and set its value to "checked". This makes sure the checkbox of these two values is checked by default.

Example Code:

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

The checked options can be toggled off anytime with a click.

We can also use the checked alone to get the same output.

Example Code:

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

Use the disabled Attribute to Disable a Checkbox by Default in HTML

To disable a checkbox by default in HTML, you can use an attribute called disabled. Specifying the value of the disabled attribute to disabled will prevent the user from checking the checkbox.

Consider the following example.

Example Code:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

From the output, it is clear that only two of the four options have a toggle feature. Eat and Code can be toggled to show a tick mark, but Drink and Repeat cannot.

The options Drink and Repeat are disabled by default. When we click the checkbox beside the Drink and Repeat options, the checkbox does not respond to our click.

That makes only two of the four options checkable.

The same result can be obtained by using disabled alone.

Example Code:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

Thus, these are the ways to enable or disable checkboxes in HTML.