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方法。
相關文章
相關標籤/搜索