JIYIK CN >

This article explores the methods of enabling and disabling checkboxes in HTML.

Checkboxes in HTML

A checkbox is an interactive box that can be toggled to indicate yes or no. It is widely used in forms and dialog boxes.

Checkboxes are used when there are a number of options and the user is free to select any number of them, including zero. This means checking one does not automatically uncheck the others.

Checkboxes are mainly used when there are options that are not mutually exclusive. A small box will appear on the side of each option that can be toggled.

By default, the box is empty. An empty box indicates a negative, or that the user did not select the option.

When you click, a check mark appears in the box. A check mark means yes.

When you click again, the check mark disappears.

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

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

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 has a toggle functionality in its respective checkbox by default.

Use the checked attribute to enable a checkbox by default in HTML

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

You just need to set the value of the property to selected to make it selected by default.

For example, for the Drink and Repeat options, add the attribute checked and set its value to “checked.” This ensures that the checkboxes for both values ​​are checked by default.

Sample 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>

Click to turn off the selected option at any time.

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

Sample 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>

Disable a checkbox by default using the disabled attribute in HTML

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

Consider the following example.

Sample 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>

It is clear from the output that only two of the four options have toggle functionality. Eat and Code can be toggled to show tick marks, but Drink and Repeat cannot.

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

This leaves only two of the four options to check.

The same result can be achieved by using disabled alone .

Sample 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>

So, these are the ways to enable or disable a checkbox in HTML.