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 aoption boption 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 aoption boption c&&&&&&&&&&&&&&&
从上面我们可以看到，无论是readonly还是disabled，都没有实现我们期望的效果。既然直接实现不了，那么我们可以变通一下，模拟实现。代码如下：
&input type="checkbox" name="chkAllowed" onclick="return&&&&&&&&&&&&&&&&&&&&&&&" checked="checked" /&&&&&&&&&&&&&&&&
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1872人阅读
最近在搞一个权限配置的页面，里面的选项框要实现级联，同时checkbox需要有三种状态：选择，部分选择，不选，搜索找到一篇文章jQuery 版的 CheckBox 复选框成组联动（性能改进版）不过我在浏览器上测试有问题，进行修改代码如下：&!DOCTYPE html&
&meta charset=&utf-8&&
&script src=&/jquery/1.11.3/jquery.min.js&&&/script&
&div class=&container&&
&input type=&checkbox& forcheckboxgroup=&group_sel&/&全选
&input type=&checkbox& group=&group_sel&/&选项1
&input type=&checkbox& group=&group_sel&/&选项2
&input type=&checkbox& group=&group_sel&/&选项n
&button type=&button& forcheckboxgroup=&group_sel&&对选中的项目进行操作&/button&
&script type=&text/javascript&&
$(&#ww&).prop(&indeterminate&, true);
$(function () {
var _jgroupCons = $(&[forcheckboxgroup]&), //所有具有 forcheckboxgroup 属性的元素
_jcheckboxs = $(&:checkbox[group]&), //所有具有 group 属性的复选框
_checkgroups = new A //复选框组数组，该数组每一项保存一组由 _jcheckboxs 过滤的复选框组，组名称即是数组项的键
_jcheckboxs.each(function (i) {
var _groupname = $(this).attr(&group&); //group 是非标准属性，必须由 attr 方法获得值，prop 方法不能获得
if (!_checkgroups[_groupname]) {
_checkgroups[_groupname] = _jcheckboxs.filter(&[group='& + _groupname + &']&);
//将所有与组关联的非复选框的元素设为无效
_jgroupCons.filter(&:not(:checkbox)&).prop(&disabled&, true).addClass(&disabled&);
_jgroupCons.filter(&:checkbox&)
//选择所有可以控制复选框组状态的复选框
.change(function () {
// 绑定 change 事件
var _jthis = $(this),
forgroupname = _jthis.attr(&forcheckboxgroup&); //forcheckboxgroup 是非标准属性，必须由 attr 方法获得值，prop 方法不能获得
//点击此复选框后只做以下三件事：
// 1. 设置所控制的复选框组内所有复选框的状态
_jcheckboxs.filter(&[group='& + forgroupname + &']&).prop(&checked&, this.checked);
// 2. 设置与自己具有相同功能的复选框的状态
_jgroupCons.filter(&:checkbox[forcheckboxgroup='& + forgroupname + &']&).prop(&checked&, this.checked).prop(&indeterminate&, false);
// 3. 设置所有与该复选框组相关联的元素的状态
_jgroupCons.filter(&[forcheckboxgroup='& + forgroupname + &']:not(:checkbox)&).prop(&disabled&, !this.checked).toggleClass(&disabled&, !this.checked);
_jcheckboxs
//选择所有成组的复选框
.change(function () {
//绑定 change 事件
var _jthis = $(this),
_blnStat = this.checked, //此复选框的选中状态
_groupname = _jthis.attr(&group&), //此复选框所属的组名称，非标准属性，必须由 attr 方法获得值，prop 方法不能获得
_group = _checkgroups[_groupname],
_checkedcount = _group.filter(function(index){
return _group[index].
}).length,//所在组处于选中状态的复选框数量
_blnEqual =
_checkedcount == 0 || _checkedcount == _group.
//该组所有成员的选中状态是否相同，即全都选中，或全都未选
if (_blnEqual) {
//设置所有可控制该组状态的复选框的状态
_jgroupCons.filter(&:checkbox[forcheckboxgroup='& + _groupname + &']&).prop(&checked&, _blnStat).prop(&indeterminate&, !_blnEqual);
_jgroupCons.filter(&:checkbox[forcheckboxgroup='& + _groupname + &']&).prop(&checked&, false).prop(&indeterminate&, true);
//设置所有与组关联的非复选框的元素状态
_jgroupCons.filter(&[forcheckboxgroup='& + _groupname + &']:not(:checkbox)&).prop(&disabled&, !(_blnStat || !_blnEqual)).toggleClass(&disabled&, !(_blnStat || !_blnEqual));
&/html&修改部分如上图的选中内容。效果图如下：对于中间状态我点击设置为全选，如果想修改可以修改_jgroupCons.filter(&:checkbox[forcheckboxgroup='& + _groupname + &']&).prop(&checked&, false).prop(&indeterminate&, true);
如果修改可以修改checked为true，indeterminate的状态并不会修改checkbox的值。针对checkbox的多种状态可以查看
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1634053次
积分：15385
积分：15385
排名：第587名
原创：199篇
转载：41篇
评论：762条
文章：16篇
阅读：93580
文章：19篇
阅读：157883
文章：10篇
阅读：205777
(1)(1)(2)(2)(4)(1)(4)(2)(5)(4)(2)(1)(2)(1)(9)(3)(3)(10)(4)(9)(7)(6)(9)(12)(3)(21)(14)(21)(14)(25)(7)(19)(18)纯CSS设置Checkbox复选框控件的样式 | 朽木博客
Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。
在本教程中，我们将创建5个不同的选择框，你可以在你的网站上使用它。
查看演示，可以看到我们将要创建的复选框样式。
首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。
* 隐藏默认的checkbox
input[type=checkbox] {
visibility: hidden;
隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。
此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。
我们开始创建复选框区的HTML。
&!-- Checbox One --&
&h3&Checkbox One&/h3&
&div class="checkboxOne"&
&input type="checkbox" value="1" id="checkboxOneInput" name="" /&
&label for="checkboxOneInput"&&/label&
&/section&
因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。
* Create the slider bar
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
现在，我们可以把label作为条带上的滑块，我们希望按钮效果是从条带的一侧移动到另一侧，我们可以添加label的过渡。
* Create the slider from the label
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
background: #ccc;
现在这个滑块在选中（关闭）位置，当我们选中复选框，我们希望有一个反应发生，所以我们可以移动滑块到另一端。我们需要知道，判断复选框被选中，如果是则改变label元素的left属性。
* Move the slider in the correct position if the checkbox is clicked
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
这就是你需要的第一个Checkbox复选框的CSS。
此复选框风格像样式一样，但不同的是，这个滑块按钮会改变颜色。当您单击滑块按钮，它移动到条带的另一边，并改变按钮的颜色。
HTML代码和样式一是完全一样的。
&!-- Checbox Two --&
&h3&Checkbox Two&/h3&
&div class="checkboxTwo"&
&input type="checkbox" value="1" id="checkboxTwoInput" name="" /&
&label for="checkboxTwoInput"&&/label&
&/section&
这个DIV会变成比样式一大一些的条带，label依然是作为滑块，使用下面的CSS来定义它。
* Checkbox Two
.checkboxTwo {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
这个样式中间有一个黑色的条，滑块会沿着它左右滑动，但是DIV元素已经使用了，所以我们需要用:before伪类创建一个新的元素。
* Create the line for the circle to move across
.checkboxTwo:before {
content: '';
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
和样式一一样，接下来我们为label写CSS样式，把它用作滑块。
* Create the circle to click
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
z-index: 1;
left: 12px;
background: #ddd;
我要实现和样式一差不多的选中状态，当选中时改变label的left和background属性。
* Create the click event for the checkbox
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
这个复选框的样式比样式二更复杂一些，它和前面的例子一样会左右滑动，并且当改变选中和未选中的状态时，滑块滑动到另一侧并且在原位置显示对应的文本。
首先，我们写HTML代码，这和前面是相同的。
&!-- Checbox Three --&
&h3&Checkbox Three&/h3&
&div class="checkboxThree"&
&input type="checkbox" value="1" id="checkboxThreeInput" name="" /&
&label for="checkboxThreeInput"&&/label&
&/section&
然后，我们用相同的方式把div作为滑块，下面的代码会创建一个黑色圆角的条带，我们可以把滑块和文本放到里面。
* Checkbox Three
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
当滑块处于未选中状态时，滑块会在左侧，并且右边显示”OFF”，当点击的时候，滑块移动到右侧，左侧显示”ON”。
但是元素数量不足以让我们实现这些功能，所以我们要用:before和:after两个伪类创建两个元素，分别放置”ON”和”OFF”。
* Create the text for the On position
.checkboxThree:before {
content: 'On';
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
* Create the label for the off position
.checkboxThree:after {
content: 'Off';
position: absolute;
top: 12px;
left: 84px;
height: 2px;
color: #ddd;
font-size: 16px;
和前面一样，我们来添加滑块的样式，当被点击时它会移动到另一侧，并且改变颜色。
* Create the pill to click
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
z-index: 1;
left: 12px;
background: #ddd;
* Create the checkbox event for the label
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
在这个样式中，我们会创建两个圆形，当点击时改变里面的圆形的颜色表示选中与未选中的状态。
和前面一样的HTML代码。
&!-- Checbox Four --&
&h3&Checkbox Four&/h3&
&div class="checkboxFour"&
&input type="checkbox" value="1" id="checkboxFourInput" name="" /&
&label for="checkboxFourInput"&&/label&
&/section&
接下来我们要为checkbox创建外面的圆形，使用CSS的border-radius属性，并且设置为100%就可以创建一个正圆形。
* Checkbox Four
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
然后我们用label元素来创建一个小一点的圆形，它会根据checkbox状态来改变颜色。
* Create the checkbox button
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
当复选框被选中的时候，我们要改变内圈的背景颜色来表示选中状态。
* Create the checked state
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
这个复选框的样式有些不同，它看起来只是比浏览器默认的checkbox样式稍微好了些，但是不同的是我们可以根据自己的需要来定义它的样式了。
首先还是一样的HTML代码
&!-- Checbox Five --&
&h3&Checkbox Five&/h3&
&div class="checkboxFive"&
&input type="checkbox" value="1" id="checkboxFiveInput" name="" /&
&label for="checkboxFiveInput"&&/label&
&/section&
在前面的例子中，我们把div作为checkbox的滑动条带或者外部的圆圈，但是这一次我们不需要了，可以使用div元素来设置复选框的区域。
* Checkbox Five
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
label标签用于Click事件和我们要定义的复选框的方框样式。
* Create the box for the checkbox
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
background: #eee;
border:1px solid #ddd;
接下来，我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。
* Display the tick inside the checkbox
.checkboxFive label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
在上面的CSS中，我们已经设置它的透明度为0.2，所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点，在选中时，可以把设置为不透明。
* Create the hover event of the tick
.checkboxFive label:hover::after {
opacity: 0.5;
* Create the checkbox state for the tick
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
这将会为你创建全新的checkbox复选框样式。
观看演示，看看这些复选框是如何工作的。
本文翻译自
自定义select样式
TA的推荐TA的最新馆藏