Jquery动态操作checkbox

标签：

　　问题的由来：html页面中使用checkbox给新建用户授权，然后提交到后台服务器，完成给用户授权。用户授权完成之后，如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限，点击不同的用户时就需要在checkbox中显示不同用户的权限信息，此时就需要动态的修改checkbox。

　　解决方法的探索：

　　首先，使用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动态操作checkbox

标签：

原文地址：http://www.cnblogs.com/giser-liang/p/4810070.html