jQuery中Input属性checkBox用removeAttr后无效的陷阱
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后无效的陷阱相关推荐
- jquery中添加属性和删除属性--------------------
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- jquery中添加属性和删除属性
jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
- ajax 请求成功 再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- 调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- jQuery 操作 input 之 checkbox
jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...
- 如何删除pdf中计算机属性,PDF文件做好后怎么修改
原标题:PDF文件做好后怎么修改 PDF文件做好后怎么修改,相信每一个办公人士都接触到过PDF文件,当我们做好了一份PDF文件.或者我们接收到一份做好的PDF文件,我们应该如何去修改它呢?小编今天将给 ...
- jQuery中如何判断checkbox是否被选中
对于CheckBox的判断我们可以使用以下方法去获取: <input type="checkbox" name="vehicle" value=" ...
- 关Jquery判断input type=checkbox元素是否被选中的判断
2019独角兽企业重金招聘Python工程师标准>>> 在用到复选框的时候,想在js中判断chekbox是否被选中 <input name="isPermit&quo ...
最新文章
- LeetCode 657 : Robot Return to Origin
- 常见四大类型视频接线DP、HDMI、DVI、VGA的比较
- 简单的python抢红包脚本-这个Python脚本牛逼了,秒抢红包就算了,还能无视撤回消息...
- 《剑指offer》c++版本 10. 斐波那契数列
- linux内核杂记(14)-Linux kernel release 5.x(1)
- 小米9拍照黑科技:基于NAS的图像超分辨率算法
- 用java程序完成从kafka队列读取消息到sparkstreaming再从sparkstreaming里把数据导入mysql中
- Vue实现的滑动切换路由组件
- IntelliJ IDEA 2017.2 x64 安装Scala
- 中虚数怎么表示_虚数是负数的平方根,为什么在三次方程中才出现的呢?|高中篇3...
- onTouch事件分发
- ROS专题----导航功能包navigation基础汇总
- RK3228开发之gc2145芯片手册分析
- logutils java_【java】简单的日志工具类LogUtils
- 统计学cv值是什么意思_什么是CV值
- Windows下的U盘监控
- 【webview】微信和PC监听浏览器关闭和刷新(亲测可用)
- 修改后的小米文件管理器(去掉远程管理)
- unity之跳一跳(完整版)
- JS生成 UUID的四种方法