问题的由来: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的更多相关文章

  1. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  2. 黄聪:JQUERY判断操作CHECKBOX选中、取消选中、反选、第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. $("#id" ...

  3. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

  4. jquery动态操作元素

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

  6. jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

  7. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  8. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  9. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

随机推荐

  1. [转]使用 Xcode 5 和 Interface Builder创建 Hello World App

    转载地址:http://www.ithome.me/archives/581.html 使用 Xcode 5 和 Interface Builder创建 Hello World App 发表回复 当x ...

  2. python学习之迭代器与生成器

    1.迭代器省内存 迭代器只允许往后读数据,不允许回读数据 迭代器不能跳着读文件,因为他是一点一点加载文件内容到内存的,读完了可以销毁或丢掉 2.生成一个迭代器 a = iter(["fd&q ...

  3. LA 5713 秦始皇修路 MST

    题目链接:http://vjudge.net/contest/144221#problem/A 题意: 秦朝有n个城市,需要修建一些道路使得任意两个城市之间都可以连通.道士徐福声称他可以用法术修路,不 ...

  4. 随便玩玩系列之一:SPOJ-RNG+51nod 算法马拉松17F+51nod 1034 骨牌覆盖v3

    先说说前面的SPOJ-RNG吧,题意就是给n个数,x1,x2,...,xn 每次可以生成[-x1,x1]范围的浮点数,把n次这种操作生成的数之和加起来,为s,求s在[A,B]内的概率 连续形的概率 假 ...

  5. GDUFE-OJ 1361校庆抽奖 翻转

    Problem Description: 在舞台中央有一个开奖盒,开奖盒有一个按钮,和一个显示屏,每轮抽奖是过程是这样的. 主持人请K个幸运观众上台,编号为1~K,围着开奖盒. 首先开奖盒上随机显示一 ...

  6. cocos2dx && Lua 环境配置

    需要的材料: 1.vs2013 2.python-2.7.3(2.7.x高于2.7的版本可能会出现错误) 3.Sublime Text 2(破解的) 4.cocos2dx-3.2 步骤: 1.安装vs ...

  7. C++Builder XE8_upd1破解安装成功纪要

    1.先下载XE8,安装失败.2.后下载XE8U1(delphicbuilder_xe8_upd1_subscription.iso),安装,选择DelPhi.C++builder,输入系列号:3.安装 ...

  8. word域3

    WORD是文字处理软件,我们在日常处理一些文字时经常遇到一些问题,如:各种公式的录入,尽管Word都提供了"公式编辑器",但其插入的却是"对象",有时排版会感觉 ...

  9. 【C语言训练】尼科彻斯定理

    题目描述验证尼科彻斯定理,即:任何一个正整数的立方都可以写成一串连续奇数的和. 输入任一正整数 输出该数的立方分解为一串连续奇数的和 样例输入13样例输出13*13*13=2197=157+159+1 ...

  10. JFinal - Handler 处理流程

    Handler 处理流程 doFilter - Handler 链中每个 handler.handle(...) 容器初始化时访问 web.xml 配置的 JFinalFilter.doFilter. ...