How to use onclick method In HTML
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"> w3wiki </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:
How to Set Checkboxes Readonly in HTML ?
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.
Table of Content
- Using disabled option
- Using onclick method
- Using the pointer-events property