jQuery中Input属性checkBox用removeAttr后无效的陷阱

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

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

因为代码是从另外一个系统迁移过来的,在此系统中运行正常。可是放到本身项目中,就没法正常使用了。因而怀疑是jQuery版本问题致使的。code

代码以下:rem

$("#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。input

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

百度以后发现不少同窗也同样遇到了这个问题console


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

百度了好久找到缘由是HTML的属性分为attribute和property,暂且将后者称为特性。date

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选择器的问题,没有选择到元素,坑了我很久。

相关文章
相关标签/搜索