Home > Web Front-end > JS Tutorial > checkbox sets the read-only effect of the checkbox to prevent users from checking_javascript skills

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

WBOY
Release: 2016-05-16 17:25:52
Original
1330 people have browsed it

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" />               
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template