prototype.js框架 dom操作(checkout选择与取消选择操作DOM)


需求:用户点击checkbox时,如果选择,则让其子类型checkbox变成灰色。

如果取消选择,再让子类型checkbox变成正常可选状态。

分析:用到知识点

1,选择器。找到目标dom节点

2,如何判断是目标标签

3,找到目标标签后,

如果选择,则设置子类型属性disabled为true

如果不选择,则设置子类型属性disabled为false

function change_item(checkbox_obj)
{
    //用户勾选后,对应的子类型,叶子都变为不可选;取消勾选后,子类型和叶子又变得可选
    var _ancestors = $(checkbox_obj).ancestors();
    var _parent    = _ancestors[0];
    var _childs    = [];
    if($(_parent).next()){
        var _obj_td    = $(_parent).next();
        _childs = $(_obj_td).descendants();//descendants()后代,childElements()直接孩子;
    }
    if(checkbox_obj.checked == true){
    	//置为只读
        for(var index in _childs){
            if(_childs.hasOwnProperty(index)){
                if($(_childs[index]).hasAttribute('type')){
                    $(_childs[index]).writeAttribute("disabled", true);
                }
            }
        }
    }else if(checkbox_obj.checked == false){
    	//置为可选
        for(var index in _childs){
            if(_childs.hasOwnProperty(index)){
                if($(_childs[index]).hasAttribute('type')){
                    $(_childs[index]).writeAttribute("disabled", false);
                }
            }
        }
    }
}
<input type="checkbox" onclick="change_item(this);" value="苹果" />苹果

8 responses on “prototype.js框架 dom操作(checkout选择与取消选择操作DOM)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>