Web开发:设置复选框的只读效果

在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果。

提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/取消并不改变其value属性,改变的只是一个checked状态。所以对于checkbox来说,设置了readonly,仍然是可以勾选/取消的。效果如下:

<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

和readonly类似的,还有一个disabled属性,这个属性的作用是设置页面元素为不可用,即不可进行任何交互操作(包括不可修改value属性、不可修改checked状态等)。效果如下:

<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

从上面我们可以看到,无论是readonly还是disabled,都没有实现我们期望的效果。既然直接实现不了,那么我们可以变通一下,模拟实现。代码如下:

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

相关链接

http://www.cnblogs.com/josephchan/archive/2012/10/15/webui_checkbox_readonly.html

设置checkbox不能选中,复选框不能选中的更多相关文章

  1. 【zTree】zTree根据后台数据生成树并动态设置前面的节点复选框的选中状态

    0.页面中准备树的ul <ul id="treeDemo10" class="ztree" style="display: none;" ...

  2. js获取checkbox复选框获取选中的选项

    js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...

  3. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  4. 【jQuery】复选框的全选、反选,推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  5. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  6. JQuery Mobile - 修改复选框的选中状态无效解决办法!

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

  7. jquery特效(6)—判断复选框是否选中进行答题提示

    前面有一段时间思想开了小差,跟着师父学习了一段时间才发现差距很大,看来我要奋起直追~\(≧▽≦)/~啦啦啦. 最近公司在做一个项目,需要根据用户选择的选项给出相应的提示,下面来看我写的测试程序的效果: ...

  8. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  9. 复选框checked 选中后不显示打钩

    复选框checked 选中后不显示打钩 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因   复选框绑定了click事件,点一次选中,再点击取 ...

  10. Python+Selenium自动化-定位一组元素,单选框、复选框的选中方法

    Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法   之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...

随机推荐

  1. spring boot 笔记--第三章

    spring boot 笔记 第三章,使用Spring boot 构建系统: 强烈建议支持依赖管理的构建系统,Maven或Gradle 依赖管理: Spring Boot的每版本都会提供它支持的依赖列 ...

  2. Interleaving String,交叉字符串,动态规划

    问题描述: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Give ...

  3. cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例

    1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...

  4. linux下查看进程路径

    在linux下查看进程大家都会想到用 ps -ef|grep XXX可是看到的不是全路径,怎么看全路径呢?每个进程启动之后在 /proc下面有一个于pid对应的路径例如:ps -ef|grep pyt ...

  5. HDU5521-最短路-建图

    Meeting Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total ...

  6. day6-面向对象进阶篇

    在面向对象基础篇中,我们讲述了面向对象的很多基础知识,但也有很多限于篇幅并没有涉及到,这里通过进阶篇来完善补充.本篇将详细介绍Python 类的成员.成员修饰符. 一. python类的成员 以下内容 ...

  7. 023——VUE中数据排序sort() / 数据反转 reverse() 的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vim 插件 for gbasic

    https://github.com/tracyone/vim-gbasic 功能特点 提供正确语法显示,包括关键字,bulidin函数,注释,强调注释,TODO注释 提供正确的折叠; 准确secti ...

  9. 剑指offer--39. 跳台阶

    时间限制:1秒 空间限制:32768K 热度指数:375795 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). cla ...

  10. L155

    Wireless Festival has been given permission to remain in London's Finsbury Park, provided performers ...