2019独角兽企业重金招聘Python工程师标准>>>

最近在做项目中,前台页面上有很多个checkBox,要根据条件来判断,哪些选中,哪些移除选中效果。

发现checkBox在使用中,第一次好用,但是取消过一次之后,再想让其变为选中状态就不行了。

由于代码是从另一个系统迁移过来的,在此系统中运行正常。但是放到自己项目中,就无法正常使用了。于是怀疑是jQuery版本问题导致的。

代码如下:

    $("#topRadio input").removeAttr("checked");$("#topRadio input").parent().removeClass("checked");var currentDom = $(".container_7[date='" + dataChoose + "']");if (dataJson[dataChoose].state == 0) {currentDom.find("input[type='checkbox']").removeAttr("checked");}else if (dataJson[dataChoose].state == 1) {currentDom.find("input[type='checkbox']").attr("checked", "true");}

首先进行判断,如果不符合条件了,就removeAttr("checked"),在下一次判断的时候如果符合条件在给加上checked。

但是发现一旦移除了 attribute - checked ,在加上的时候就加不上了。

百度之后发现很多同学也一样遇到了这个问题


在做复选框全选按钮的时候,出现了一个问题,使用语句$.attr(‘checked‘,true),将复选框的属性改为被选中,在chrome浏览器中第一次点击有效后面就不行了,IE8倒是没有问题。

百度了很久找到原因是HTML的属性分为attribute和property,暂且将后者称为特性。

checked属性即分为attribute->checked,和property->true,false。

对于一个checkbox,若未定义checked="checked",alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。

使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。

所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。


于是修改代码:

    var currentDom = $(".container_7[date='" + dataChoose + "']");if (dataJson[dataChoose].state == 0) {currentDom.find("input[type='checkbox']").prop("checked",false);}else if (dataJson[dataChoose].state == 1) {console.log(currentDom);console.log(currentDom.find("input[type='checkbox']").attr("checked"));currentDom.find("input[type='checkbox']").prop("checked", "true");}

改为用prop来给复选框设置选中效果,问题解决。 此问题应该是jQuery版本问题,如果发现出现了这个问题:

1.不妨换个版本

2.设置checkBox的属性方法用 prop()


一直以为是,jQuery选择器的问题,没有选择到元素,坑了我好久。

转载于:https://my.oschina.net/u/2272597/blog/859703

jQuery中Input属性checkBox用removeAttr后无效的陷阱相关推荐

  1. jquery中添加属性和删除属性--------------------

    jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...

  2. jquery中添加属性和删除属性

    jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...

  3. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...

  4. ajax 请求成功 再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  5. 调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  6. jQuery 操作 input 之 checkbox

    jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...

  7. 如何删除pdf中计算机属性,PDF文件做好后怎么修改

    原标题:PDF文件做好后怎么修改 PDF文件做好后怎么修改,相信每一个办公人士都接触到过PDF文件,当我们做好了一份PDF文件.或者我们接收到一份做好的PDF文件,我们应该如何去修改它呢?小编今天将给 ...

  8. jQuery中如何判断checkbox是否被选中

    对于CheckBox的判断我们可以使用以下方法去获取: <input type="checkbox" name="vehicle" value=" ...

  9. 关Jquery判断input type=checkbox元素是否被选中的判断

    2019独角兽企业重金招聘Python工程师标准>>> 在用到复选框的时候,想在js中判断chekbox是否被选中 <input name="isPermit&quo ...

最新文章

  1. LeetCode 657 : Robot Return to Origin
  2. 常见四大类型视频接线DP、HDMI、DVI、VGA的比较
  3. 简单的python抢红包脚本-这个Python脚本牛逼了,秒抢红包就算了,还能无视撤回消息...
  4. 《剑指offer》c++版本 10. 斐波那契数列
  5. linux内核杂记(14)-Linux kernel release 5.x(1)
  6. 小米9拍照黑科技:基于NAS的图像超分辨率算法
  7. 用java程序完成从kafka队列读取消息到sparkstreaming再从sparkstreaming里把数据导入mysql中
  8. Vue实现的滑动切换路由组件
  9. IntelliJ IDEA 2017.2 x64 安装Scala
  10. 中虚数怎么表示_虚数是负数的平方根,为什么在三次方程中才出现的呢?|高中篇3...
  11. onTouch事件分发
  12. ROS专题----导航功能包navigation基础汇总
  13. RK3228开发之gc2145芯片手册分析
  14. logutils java_【java】简单的日志工具类LogUtils
  15. 统计学cv值是什么意思_什么是CV值
  16. Windows下的U盘监控
  17. 【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
  18. 修改后的小米文件管理器(去掉远程管理)
  19. unity之跳一跳(完整版)
  20. JS生成 UUID的四种方法

热门文章

  1. GPU 根据PID号查看对应的进程
  2. 全新吃鸡手游香肠派不删档开测!安卓模拟器电脑版攻略提前看
  3. 服务器显示大量审核登录成功,服务器出现大批量登录审核失败/NtLmSsp攻击
  4. 跨境卖家使用USPS寄件的流程及注意
  5. 张小龙:突然搭错了神经,写了个邮件,微信就此开始!
  6. mui框架tap事件点击一次,执行两次
  7. 单元格内多个姓名拆分成一列_一个单元格的内容如何拆分成多个单元格
  8. 安卓手机摄像头维修流程
  9. 渗透测试-地基钓鱼篇-Cobalt Strike钓鱼(二十五)
  10. b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝固定侧边栏