Jquery动态操做checkbox

  问题的由来:html页面中使用checkbox给新建用户受权,而后提交到后台服务器,完成给用户受权。用户受权完成以后,若是用户的权限发生改变管理员须要修改多个用户的权限或查看某用户的权限,点击不一样的用户时就须要在checkbox中显示不一样用户的权限信息,此时就须要动态的修改checkbox。javascript

 

  解决方法的探索:html

  首先,使用Jquery的attr对checkbox进行遍历,全部的checkbox都设置为false,未选择。java

$('input[name="auth"]').each(function(){
		   $(this).attr("checked",false);
	});

  接下来,经过ajax传入用户名,获得json,并获取用户所拥有的权限模块,经过checkbox的value设置模块是否选择ajax

$.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);
				});
			}
		}
	});

  最终的结果不是很理想,第一次请求是能够的,若是个人权限只有第一和第二个,那么只有这两个勾选了;第二次换另外一我的,他本来有四个权限,那么除了一和二其余两个被勾选,第三次再换一我的,他没有任何权限,也能够显示都未勾选;重点来了,若是再切换第一个或第二我的,那么显示都未勾选。json

  使用浏览器的调试功能会发现代码执行正确,可是checked属性却未改变。浏览器

  解决办法通过多方查证,attr和prop的使用是有不一样的,若是前面代码的attr都修改成prop就能够完美的达到预期的效果,即选中某我的就能够显示某我的当前所拥有的权限。服务器

  在此给出attr和prop的区别(我认为比较简单的解释):app

    • 对于HTML元素自己就带有的固有属性,在处理时,使用prop方法;
    • 对于HTML元素咱们本身自定义的DOM属性,在处理时,使用attr方法。
相关文章
相关标签/搜索