最近实现一个功能,用多选框的选中,实现启用和禁用功能。
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就回到了点击之前的状态。