Jquery动态操作checkbox
2015-09-15 13:46
561 查看
问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权。用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用户时就需要在checkbox中显示不同用户的权限信息,此时就需要动态的修改checkbox。
![](http://images2015.cnblogs.com/blog/514145/201509/514145-20150915131057476-896538592.png)
解决方法的探索:
首先,使用Jquery的attr对checkbox进行遍历,所有的checkbox都设置为false,未选择。
接下来,通过ajax传入用户名,得到json,并获取用户所拥有的权限模块,通过checkbox的value设置模块是否选择
最终的结果不是很理想,第一次请求是可以的,如果我的权限只有第一和第二个,那么只有这两个勾选了;第二次换另一个人,他原本有四个权限,那么除了一和二其他两个被勾选,第三次再换一个人,他没有任何权限,也可以显示都未勾选;重点来了,如果再切换第一个或第二个人,那么显示都未勾选。
使用浏览器的调试功能会发现代码执行正确,但是checked属性却未改变。
解决办法:经过多方查证,attr和prop的使用是有不同的,如果前面代码的attr都修改为prop就可以完美的达到预期的效果,即选中某个人就可以显示某个人当前所拥有的权限。
在此给出attr和prop的区别(我认为比较简单的解释):
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法;
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
![](http://images2015.cnblogs.com/blog/514145/201509/514145-20150915131057476-896538592.png)
解决方法的探索:
首先,使用Jquery的attr对checkbox进行遍历,所有的checkbox都设置为false,未选择。
$('input[name="auth"]').each(function(){ $(this).attr("checked",false); });
接下来,通过ajax传入用户名,得到json,并获取用户所拥有的权限模块,通过checkbox的value设置模块是否选择
$.ajax({ type:"post", url:"demo", daattype:"json", data:{ type:"getright", username:username }, success:function(data){ var authObjs = eval("("+data+")");//解析json数据 if(authObjs.status === false){ } else if(authObjs.status === true){ var authApps = authObjs.apps; $.each(authApps,function(i,authApp){ $("input:checkbox[value='"+authApp+"']").attr('checked',true); }); } } });
最终的结果不是很理想,第一次请求是可以的,如果我的权限只有第一和第二个,那么只有这两个勾选了;第二次换另一个人,他原本有四个权限,那么除了一和二其他两个被勾选,第三次再换一个人,他没有任何权限,也可以显示都未勾选;重点来了,如果再切换第一个或第二个人,那么显示都未勾选。
使用浏览器的调试功能会发现代码执行正确,但是checked属性却未改变。
解决办法:经过多方查证,attr和prop的使用是有不同的,如果前面代码的attr都修改为prop就可以完美的达到预期的效果,即选中某个人就可以显示某个人当前所拥有的权限。
在此给出attr和prop的区别(我认为比较简单的解释):
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法;
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
相关文章推荐
- jquery实现全选和全不选
- 基于jQuery倾斜打开侧边栏菜单特效代码
- Intel项目所用jquery小知识点总结
- 基于jQuery滑动杆实现购买日期选择效果
- jQuery整理笔记文件夹
- Jquery的跨域调用
- jQuery简单实现两级下拉菜单效果代码
- HTML5,Javascript,and jQuery 24-Hour Trainer(2)——一些简单的tag
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
- 使用JQuery插件Pinto 和Lightbox 制作带网格布局的响应式(Responsible)画廊(gallery)
- Jquery Md5加密解密
- JQuery中的extend函数
- jquery 1.9里面已经删除了toggle(fn1, fn2)函数
- jquery selector
- jQuery ajax走error的原因
- 【jQuery】总结:筛选器、控制隐藏、操作元素style属性
- jQuery Easing 使用方法及其图解
- jquery笔记
- JQuery ajax 返回json时出现中文乱码该如何解决
- jQuery与MooTools库的一些比对