解决jquery操作checkbox火狐下第二次无法勾选问题


Posted in Javascript onFebruary 10, 2014

最近在工作中使用jquery操作checkbox,使用下面方法进行全选、反选:

var ischecked=allCheckObj.is(':checked'); 
ischecked?checksObj.attr('checked',true):checksObj.attr('checked',false);

调试时在ie没有问题,考虑到兼容性,试试了firefox,遇到了问题。于是乎,做了如下实验:
复选框绑定了click事件,点一次选中,再点击取消选中,依次类推。这个功能在ie中没问题,但是在firefox中测试的时候,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,太诡异了。代码修改了却得不到正确的显示状态,纠结了很久,找不到原因。
正解:后来经偶像指点,原来是jQuery版本问题。我操作属性用的是
$("**").attr("attrName");而jQuery的版本用的是1.9,这就是存在一个兼容性和稳定性问题。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即
$("input[type='checkbox']").prop("checked"); 
$("input[type='checkbox']").prop("disabled", false); 
$("input[type='checkbox']").prop("checked", true);

在使用是将attr改为prop,问题得解。
你遇到这个奇怪的问题了吗?赶紧试试吧
Javascript 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
vue实现百度搜索功能
Dec 28 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
js判断undefined类型示例代码
Feb 10 #Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 #Javascript
js网页实时倒计时精确到秒级
Feb 10 #Javascript
js格式化时间和js格式化时间戳示例
Feb 10 #Javascript
javaScript 页面自动加载事件详解
Feb 10 #Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 #Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 #Javascript
You might like
PHP IPV6正则表达式验证代码
2010/02/16 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
某公司面试题
2012/03/05 面试题
报社实习生自荐信
2014/01/24 职场文书
求职简历的自我评价
2014/01/31 职场文书
假面舞会策划方案
2014/05/29 职场文书
旷工检讨书大全
2015/08/15 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android