How to Set Checkboxes Readonly in HTML ? - GeeksforGeeks (2024)

In this article, we will learn whether it is possible to make checkboxes readonly in HTML or not. Checkboxes are commonly used to allow users to select multiple options from a set of choices. They are represented in HTML by the <input> tag with the type=”checkbox” attribute. It is not possible to set checkboxes to read-only using standard HTML attributes.

However, there are alternative approaches such as using the disabled attribute or CSS properties like pointer-events that can simulate the read-only behavior for checkboxes. By using these approaches, you can achieve the same effect as read-only checkboxes.

Using disabled option

This approach uses the disabled option with the input tag which represents the checkboxes. When the disabled option is added to the input tag, the checkbox is essentially disabled so you can view the checkbox but cannot interact with it. You can also use the ‘checked’ option and get the read-only checkbox which is already checked but cannot be unchecked.

Syntax:

<input name=".." type="checkbox" disabled value="1" />

Used Checkbox options:

• disabled: This option disables the checkbox from interacting with any event and shows its initial checked or unchecked version.

Example: In this example we will see the the implementation to make the checkboxes readonly using the disabled option

Output:

Using onclick method

This approach is using the onclick method with the input tag which is representing the checkboxes. When the on-click method is added to the input tag, and it is set to a “return false” value the checkbox is essentially disabled so you can view the checkbox but cannot interact with it.

Syntax:

<input type="checkbox" onclick="return false"/>

Used method:

• onclick: This event handler you to specify a function to be executed when the click event occurs on the element.

Example: In this example we will see the implementation of how to make the checkboxes read-only using the onclick method.

Output:

Using the pointer-events property

This approach is using the pointer-events CSS property to the input tag which is representing the checkboxes. When this CSS property is given as design to the input tag, the checkbox is essentially read-only so you can view the checkbox but cannot interact with it.

Syntax:

input[type="checkbox"]{
 pointer-events: none;
}

Used Property:

• pointer-events: This property is used to control how an element responds to user interactions with a pointing shows read device, determining whether it should receive pointer events or not.

Example: In this example we will see how to make the checkboxes readonly using the pointer-events property:

Output: