CheckBox Set check box read-only effect does not allow users to tick _javascript tips

Source: Internet
Author: User

In web development, there are times when you need to show some check boxes (checkboxes) to indicate that the place is optional, but sometimes you just want to tell the user that "this is a place where you can check it out" and don't want the user to tick (for example, on the information Display page). This is where you need to set the check box to read-only effect.

Referring to read-only, it is easy to think of using the ReadOnly property, but for a check box, this property differs from the desired effect. The reason is that the ReadOnly property is associated with the Value property of the page element (such as a textbox, ReadOnly cannot modify the text content of the input box), and the check/cancel of the checkbox does not change its Value property, just a checked state. So for the checkbox, set the ReadOnly, still can be checked/canceled. The effect is as follows:

<input type= "text" name= "Realname" value= "read-only text content ..." 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 a disabled property that is used to set the page element as unavailable, i.e. no interaction can be made (including the Value property cannot be modified, the checked state cannot be modified, etc.). The effect is as follows:

Text content entered by the
<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

From the above we can see that neither readonly nor disabled to achieve the desired effect. Since the direct implementation is not, then we can modify, simulation implementation. The code is as follows:

<input type= "checkbox" Name= "chkallowed" onclick= "return false;" checked= "Checked"/>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.