通常情况下,我们都是通过 jQuery 的 attr 属性来设置或返回被选元素的属性值的,但是今天在用的时候遇到了一个问题,就是“当要取消已选中的 checkbox 时,弹出确认框,如果用户点击 ‘取消’,则将 checkbox 重新设置为选中状态”。
我是通过 jQuery 的 attr 方法来修改选中状态的,代码如下:
if(confirm('确定取消选择?')){ alert('取消成功') }else{ $("#checkbox").attr('checked', true); }
但是发现点击“取消”时出现了下面的状况:checkbox 的 checked 属性已设置为 ‘checked’,但是页面上却还是显示为选中的状态(如下图)。
对于 checkbox,我们设置选中与不选中的操作如下:
//判断是否选中 $('#checkbox').prop('checked') 设置选中与不选中状态: $('#checkbox').attr('checked',true) $('#checkbox').attr('checked',false)
但是怎么今天这次就不行了呢?经过查找文档,我们发现此方法在 1.9+ 版本中的处理有些不一样。
IE10,Chrome,FF中,对于选中状态,第一次 $('#checkbox').attr('checked',true)
可以实现,但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true)
去选中时,虽然代码中有 checked='checked'
,但是画面表现都没有打勾,E8/IE6下无此问题。
后来调查了相关的资料,发现现在将 attr('checked',true)
都换成 prop('checked',true)
即可解决问题。
灰常记忆 2014/10/24 09:34
都是技术文章
Specs 2014/10/24 11:34
@ 笔记~
灰常记忆 2014/10/24 19:11
@ 看到没有我连笔记都不放过过
豆瓣不小心 2014/10/24 10:55
虽然不懂,也顶一下
Specs 2014/10/24 11:51
记个笔记~
帅淼 2015/02/02 22:37
牛逼,正好碰到这问题