checkbox是html里面的一种复选框，操作这个东西的时候说实话是很麻烦的，因为是靠我们判断他的状态是不是被选中来操作的，今天要说的怎么将一部分checkbox选中以后，没有被选的变灰色，按照我们自己的要求来操作复选框，例子：
我们要求选中三个以后就不让用户再选择了：
我们今天就做这个。
首先我们画出几个复选框：
<input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>vue</label> <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>boostrap</label> <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C</label> <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C++</label> <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>C#</label> <input type='checkbox' name='cate[]' value='102' οnclick="check();"><label>PHP</label>
通过DOM获取到复选框的元素：
var obj=document.getElementsByTagName("input")
最后我们写控制数量的函数：
function check() { var sun=0; for(var i=0;i<obj.length;i++) { if(obj[i].type=="checkbox" && obj[i].checked) { sun++; if( sun< 3 ) { for(var j=0;j<obj.length;j++) obj[j].disabled = false; } } else if(sun == 3 ) { for(var j=0;j<obj.length;j++) { if ( !obj[j].checked ) obj[j].disabled = true; } event.srcElement.checked=true; layer.msg("最多选择3个！"); break; } else if(sun > 3 ) { event.srcElement.checked=false; break; } } }
这样就基本完成了，如果没看明白的可以下方留言。
效果展示：
这里用到的css：
input{ display: inline-block; vertical-align: middle; margin: 0; padding: 0; width: 20px; height: 20px; background: url(../css/polaris/polaris.png) no-repeat; border: none; cursor: pointer; } label{ font-family:"agency fb"; font-size: larger; }
引用到的js和css：
<link href="../css/layui/css/layui.css" rel="stylesheet"/> <link href="../css/polaris/polaris.css" rel="stylesheet" /> <script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="../css/layui/lay/dest/layui.all.js" type="text/javascript"></script> <script src="../js/icheck.js"></script>
这里的icheck.js是一个美化checkbox的插件，后期我会简单的介绍一下这个插件具体怎么用。
