最近实现一个功能，用多选框的选中，实现启用和禁用功能。
1、实现的过程中发现一个问题：启用和禁用之前有条件判断，如果不满足条件则取消事件，但是发现只要点击多选框其选中状态都会发生变化。
想到的是input点击后有浏览器默认的事件，首先想到的办法是在点击事件里面给checkbox的状态在改成checked。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#ckb").click(function(){ if(true){ //条件不满足，还原多选框的选中状态 $(this).attr("checked",'true'); } }); }); </script> </head> <body> <input type="checkbox" id="ckb" checked/>启用 </body> </html>
经过测试发现，在此修改checkbox的状态为选中状态是没有效果的，点击多选框还是会切换选中状态。
2、由此想起应该还是默认事件影响的，只有取消相应的默认事件，经过查询发现使用e.preventDefault();就可以取消。
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#ckb").click(function(e){ if(true){ //条件不满足，取消默认事件 e.preventDefault(); //条件不满足，还原多选框的选中状态 //$(this).attr("checked",'true'); } }); }); </script> </head> <body> <input type="checkbox" id="ckb" checked/>启用 </body> </html>
测试发现，不管怎么点击，checkbox始终都是选中状态。这样可以实现功能，问题解决了。
3、由此有个疑问:checkbox的浏览器的默认事件和点击事件哪个先运行呢？为了验证问题做了下面的测试
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#ckb").click(function(e){ if(true){ //条件不满足，取消默认事件 e.preventDefault(); alert($(this).attr("checked")); $(this).removeAttr("checked"); alert($(this).attr("checked")); } }); }); </script> </head> <body> <input type="checkbox" id="ckb" checked/>启用 </body> </html>
先取消浏览器的默认事件，在取消checkbox的选中属性，发现多选框最后还是选中状态。由此只能说明浏览器的默认事件是在点击事件之后运行的。
正常情况下在鼠标点击之前，checkbox的状态是选中，那么在点击checkbox时，它会将当前的状态取反即取消选中，然后执行响应事件，最后默认事件将这个状态生效。
上面的这个代码中，由于去掉了默认事件，因此，在执行响应事件时，checkbox确实取消选中了，但是在事件结束时，由于没有没有默认事件，那么这个checkbox就回到了点击之前的状态。