checkbox sets the read-only effect of the checkbox to prevent users from checking

In web development, sometimes you need to display some checkboxes to indicate that this place can be checked, but sometimes you just want to inform the user that "this place can be checked." If you don't want users to check here (for example, on the information display page), you need to set the check box to read-only.

When it comes to read-only, it is easy to think of using the readonly attribute, but for check boxes, this attribute is different from the expected effect. The reason is that the readonly attribute is associated with the value attribute of the page element (such as textbox, the text content of the input box cannot be modified if readonly is set), and the check box is checked/cancelled without changing its value attribute. Just a checked status. So for the checkbox, if readonly is set, it can still be checked/cancelled. The effect is as follows:


readonly="readonly" />
option a option b option c	option a option b option c

readonly="readonly"

/> option a
option b
option c option a
option b
option c

Similar to readonly, there is also a disabled attribute. The function of this attribute is to set the page element to be unavailable, that is, no interactive operations can be performed (including the value attribute cannot be modified, the checked status cannot be modified, etc.). The effect is as follows:

disabled="disabled" />
option a option b option c	option a option b option c

disabled="disabled" />
option a option b option c	option a option b option c

From the above we can see that neither readonly nor disabled achieves the desired effect. Since it cannot be implemented directly, we can work around it and simulate it. The code is as follows:

onclick="return false;" checked="checked" />