Set checkbox cannot be selected, checkbox cannot be selected_html/css_WEB-ITnose

Web development: Set the read-only effect of check boxes

In web development, sometimes it is necessary to display some check boxes (checkboxes) to indicate that this place can be checked. , but sometimes you just want to inform the user that "this place can be checked" and don't want the user to check here (such as on the information display page). In this case, you need to set the check box to read-only. Effect.

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 when readonly is set), and checking/unchecking the checkbox does not change its value attribute, only a checked state. So for the checkbox, if readonly is set, it can still be checked/cancelled. The effect is as follows:

<input type="text" name="realname" value="只读的文本内容..." readonly="readonly" /> 	<input type="checkbox" name="optiona" readonly="readonly" />option a<input type="checkbox" name="optionb" readonly="readonly" />option b<input type="checkbox" name="optionc" readonly="readonly" />option c

option a
option b
option c

Similar to readonly, there is also a disabled attribute, which is used to set The page element is 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:

<input type="text" name="realname" value="输入的文本内容..." disabled="disabled" /> 	<input type="checkbox" name="optiona" disabled="disabled" />option a<input type="checkbox" name="optionb" disabled="disabled" />option b<input type="checkbox" name="optionc" disabled="disabled" />option c 	

option a
option b
option c

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

<input type="checkbox" name="chkAllowed" onclick="return false;" checked="checked" /> 

Related links