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

在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" />               

赞 (0)

相关推荐

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

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如在信息展示页面),这时候就需要将复选框设置成只读的效果. 提到只读,很容易想到使用readonly属性,但是对于复选框来说,这个属性和期望得到的效果是有差别的.原因在于readonly属性关联的是页面元素的value属性(例如textbox,设置了readonly就不能修改输入框的文本内容),而复选框的勾选/

  • 用js设置下拉框为只读的小技巧

    在项目开发过程中我们时常会碰到要设置下拉框为只读(readonly),但是可惜的是select没有只读属性,所以需要在select外面包含一个span,通过js来改变. 下面这段html代码是在struts2的下拉标签中加入了span标签,在页面装载的时候就让下拉框变成不可读. 复制代码 代码如下: <body onload="init()"> <span id="id_select"> <s:select name="sjd

  • element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

    目录 背景 1.监听复选框点击事件check 2.手动展开,使用node.expand()方法 项目中的实现 一.复选框勾选后能自动展开并选中,先展开再勾选也可以自动展开 二. 展开指定结点 三. 勾选指定结点 四.展开并勾选结点(支持异步树)牛逼版,实现展开回调 背景 项目中用到了vue的element-ui框架,用到了el-tree组件.由于数据量很大,使用了数据懒加载模式,即异步树.异步树采用复选框进行结点选择的时候,没法自动展开,官方文档找了半天也没有找到好的办法! 找不到相关的配置,或

  • input:checkbox多选框实现单选效果跟radio一样

    最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行. 废话不多说,直接代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

  • Extjs 4.x 得到form CheckBox 复选框的值

    Extjs 4.x 得到form CheckBox 复选框的值

    CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 复制代码 代码如下: var win = new Ext.Window({ modal : true, title : '确定要拒绝该表吗?', width : 500, plain : true, items : [fp] }); win.show(); 弹出的窗口是载体,items里面的[fp]是form表单的句柄. 具体定义如下: 复制代码 代码如下: var fp = Ex

  • WPF实现带全选复选框的列表控件

    WPF实现带全选复选框的列表控件

    本文将说明如何创建一个带全选复选框的列表控件.其效果如下图: 这个控件是由一个复选框(CheckBox)与一个 ListView 组合而成.它的操作逻辑: 当选中"全选"时,列表中所有的项目都会被选中:反之,取消选中"全选"时,所有项都会被取消勾选. 在列表中选中部分数据项目时,"全选"框会呈现不确定状态(Indetermine). 由此看出,"全选"复选框与列表项中的复选框达到了双向控制的效果. 其设计思路:首先,创建自定义

  • JavaScript实现复选框全选或全取消操作

    JavaScript实现复选框全选或全取消操作

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 实现思路 1.获取总选框.所有小选框元素对象 2.按钮控制小按钮- - -给总选框绑定onclick点击事件,事件处理程序- - -for循环遍历所有小选框,将总选框的- - -checked属性值- - -赋值给它们 3.小按钮影响总按钮- - -for循环 给每个小复选框绑定点击事件,每次点击都 for循环 检查所有的复选框是否被选中: 设置一个变量 flag 控制总按钮的选中状态,初始值为

  • 全选复选框JavaScript编写小结（附代码）

    对于全选框的操作分为两种情况: 1.单击全选框,下面全部选中 2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中. html样式 <tr> <td>爱  好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class=&quo

  • 基于jquery实现复选框全选，反选，全不选等功能

    jquery 实现全选,反选,全不选等功能,下面直接以例子进行说明.设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等): <input type="checkbox" name="fruit" value="apple" />苹果 <input type="checkbox" name="fruit" value="orange" />橘子 <in

  • jquery统计用户选中的复选框的个数

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery test</title> <script src="jquery-1.11.1.min.js"></script> </head> <body> <input type="che

随机推荐