問題的由來: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方法。