checkbox设置复选框的只读效果不让用户勾选


Posted in Javascript onAugust 12, 2013

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

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

option a                    option b                    option c                option aoption boption c               

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

               
                    option a                    option b                    option c                option aoption boption c               

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

               
Javascript 相关文章推荐
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 #Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 #Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 #Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 #Javascript
js获取php变量的实现代码
Aug 10 #Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 #Javascript
jquery对象和DOM对象的区别介绍
Aug 09 #Javascript
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php中explode函数用法分析
2014/11/15 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
jquery offset函数应用实例
2012/11/14 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Python的两道面试题
2013/06/29 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
商业房地产广告语
2014/03/13 职场文书
项目建议书范文
2014/05/12 职场文书
完美的中文自荐信
2014/05/24 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
六一亲子活动感想
2015/08/07 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书