欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

复选框checkbox的选中问题

程序员文章站 2022-05-31 13:18:32
...

今天在使用复选框的时候遇到一个问题:

下面是效果图:预期应该是点击编辑时,弹框内相应的复选框打上勾,但是却没有效果

复选框checkbox的选中问题

下面是js代码:

function Edit() {
    var rows = $("#RoleIndex").datagrid("getSelections");
    if (rows.length == 0) {
        $.messager.alert('温馨提示:', "请至少选中一行数据");
        return false;
    }
    if (rows.length > 1) {
        $.messager.alert('温馨提示:', "只能同时编辑一行数据");
        return false;
    }
    $('#AddRoleList').dialog({
        title: '编辑角色',
        width: 400,
        height: 300,
        closed: false,
        cache: false,
        modal: true
    });
    $('#AddRoleListForm').form('clear');
    //alert(rows[0].AuthorityString);
    var AuthorityStringArr = rows[0].AuthorityString.split(",");
    for (var i = 0; i < AuthorityStringArr.length;i++) {
        $("input:checkbox[value='" + AuthorityStringArr[i] + "']").attr('checked', 'true');
    }
    $("#nID").val(rows[0].nID);
    $("#sUserRoleName").val(rows[0].sUserRoleName);
}

因为以前一直是这么使用的,没碰到过问题,这次居然行不通了,确实让我一时间找不到原因,百度了之后才知道:

控制checkbox选中状态不只是attr一个方法,还有prop方法:

for (var i = 0; i < AuthorityStringArr.length;i++) {
        $("input:checkbox[value='" + AuthorityStringArr[i] + "']").prop('checked', 'true');
    }

然后就可以了。

因为博主是.net的新人,见识比较浅,以前还真不知道这个方法。

接下来总结一下prop方法和attr方法的区别:

对于html元素本身就带有的固有属性,用prop方法处理;

对于我们自己自定义的DOM属性,用attr方法处理。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定

义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。