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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
vue-axios使用详解
May 10 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
js变换显示图片的实例
2013/04/16 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python3 入门教程 简单但比较不错
2009/11/29 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
python实现简单的文字识别
2018/11/27 Python
对Python 语音识别框架详解
2018/12/24 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
天河观后感
2015/06/11 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python