How to Set Checkboxes Readonly in HTML ?
Last Updated :
05 Jan, 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
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>checkboxes be set to readonly</title>
</head>
<body>
<h1 style="color: green; margin: 2rem">
GeeksforGeeks
</h1>
<h3 style="margin: 2rem; margin-top: -1.5rem">
Can checkboxes be set to readonly?
</h3>
<div style="margin: 2rem;">
<input name="chkBox_1" type="checkbox"
disabled value="1" />
<label for="chkBox_1">
Disabled unchecked option
</label>
</div>
<div style="margin: 2rem;">
<input name="chkBox_2" type="checkbox"
disabled checked value="1" />
<label for="chkBox_2">
Disabled checked option
</label>
</div>
</body>
</html>
|
Output:
.gif)
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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>checkbox to be set readonly</title>
</head>
<body>
<h1 style="color: green; margin: 2rem">
GeeksforGeeks
</h1>
<h3 style="margin: 2rem; margin-top: -1.5rem">
Can checkboxes be set to readonly?
</h3>
<div style="margin: 2rem;">
<input name="chkBox_1" type="checkbox"
onclick="return false" />
<label for="chkBox_1">
Disabled unchecked option with Onclick method
</label>
</div>
<div style="margin: 2rem;">
<input name="chkBox_2" type="checkbox"
onclick="return false" checked />
<label for="chkBox_2">
Disabled checked option with onclick method
</label>
</div>
</body>
</html>
|
Output:
.gif)
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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>checkbox to be set readonly</title>
<style>
input[type="checkbox"] {
pointer-events: none;
}
.head1 {
color: green;
margin: 2rem;
}
.head2 {
margin: 2rem;
margin-top: -1.5rem;
}
.div1 {
margin-top: 2rem;
}
.div2 {
margin-top: 2rem;
}
</style>
</head>
<body>
<h1 class="head1">
GeeksforGeeks
</h1>
<h3 class="head2">
Can checkboxes be set to readonly?
</h3>
<div class="div1">
<input name="chkBox_1" type="checkbox" />
<label for="chkBox_1">
Disabled unchecked option with
Pointer-events
</label>
</div>
<div class="div1">
<input name="chkBox_2" type="checkbox"
checked />
<label for="chkBox_2">
Disabled checked option with
Pointer-events
</label>
</div>
</body>
</html>
|
Output:
.gif)
Share your thoughts in the comments
Please Login to comment...