`
zccst
  • 浏览: 3315929 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
作者:zccst

需求:用户点击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="苹果" />苹果
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics