js控制多层单选，多选按钮，做隐藏操作

项目中遇到多层级单选，多选按钮的置灰/隐藏操作。特意写了一个公用组件：

//置灰方式
//controllerArr数组添加如下数据：
//{ctrlName:"gds_anquanyuanshishi", hidType:1, hidArr:[{hidKey:"其他", hidName:"gds_qitashishi"},{hidKey:"aa", hidName:"gds_qitashishi1"}]}
//ctrlName:radio名字
//hidType:隐藏方式：1：disabled，2：hidden。
//hidArr：需要控制的数组 hidKey：需要匹配的值 hidName：需要隐藏的input

/*

是radio时
    遍历规则 找到匹配checkbox的规则项
        匹配到key而且是checked时，隐藏框置亮, 遍历规则，找到对应的隐藏框
        否则
            隐藏级是text
                清空置灰
            隐藏级是radio
                遍历radio
                    是checked
                        全部置灰
                        触发事件
            隐藏级是checkbox
                遍历checkbox隐藏级
                    状态是checked
                        触发click事件
是checkbox时
    遍历规则 找到匹配checkbox的规则项
        是checked时，隐藏框置亮
        否则
            隐藏级是text
                清空置灰
            隐藏级是radio
                遍历radio
                    是checked
                        全部置灰
                        触发事件
            隐藏级是checkbox
                遍历checkbox隐藏级
                    状态是checked
                        触发click事件
*/
var HidItemUtil = {
    hidType : 1,//隐藏方式：1:disabled, 2:display
    controllerArr : [],
    doHidItem : function(item, hidType){
        var _self = this;
        hidType = typeof hidType == "undefined" ? _self.hidType : hidType;
        if(hidType == 1)
            item.prop("disabled", "disabled");
        else
            item.hide();
    },
    doShowItem : function(item, hidType){
        var _self = this;
        hidType = typeof hidType == "undefined" ? _self.hidType : hidType;
        if(hidType == 1)
            item.prop("disabled", "");
        else
            item.show();
    },
    initHidList : function(controllerObj){
        var _self = this;
        $.each(controllerObj.hidArr, function(){
            var hidType = typeof this.hidType != "undefined" ? this.hidType:controllerObj.hidType;
            _self.itemsHide(this.hidName, hidType);
        });
    },
    itemsShow : function(hidNameList, hidType){
        var _self = this;
        $.each(hidNameList, function(i, itemName){
            _self.doShowItem($("[name$='" + itemName + "']"), hidType);
        });
    },
    itemsHide : function(hidNameList, hidType){
        var _self = this;
        $.each(hidNameList, function(i, itemName) {
            $("[name$='" + itemName + "']").each(function (i) {
                if ($(this).prop("type") == "radio") {
                    $(this).prop("checked", false);
                    $(this).trigger("change");
                } else if ($(this).prop("type") == "checkbox") {
                    if ($(this).prop("checked")) {
                        $(this).click();
                    }
                } else if ($(this).prop("type") == "text") {
                    $(this).val("");
                }
                _self.doHidItem($(this), hidType);
            });
        });
    },
    run : function(){
        var _self = this;
        if(_self.controllerArr.length == 0){return;}
        for(var i = 0; i < _self.controllerArr.length; i++){
            var controllerObj = _self.controllerArr[i];
            _self.initHidList(controllerObj);

            $("[name$='"+controllerObj.ctrlName+"']").on("change", controllerObj, function(obj){
                var self = $(this);
                var ctrlObj = obj.data;
                var hidType = ctrlObj.hidType;
                if(self.prop("type") == "radio"){ //radio时判断
                    for(var x=0; x<ctrlObj.hidArr.length; x++){
                        var hideObj = ctrlObj.hidArr[x];
                        hidType = typeof hideObj.hidType != "undefined" ? hideObj.hidType:hidType;
                        if($(this).val() == hideObj.hidKey && $(this).prop("checked")){ //$(this)是checked项
                            _self.itemsShow(hideObj.hidName, hidType);
                        }else{
                            _self.itemsHide(hideObj.hidName, hidType);
                        }
                    }
                }else if(self.prop("type") == "checkbox"){//checkbox时判断
                    for(var j=0; j<ctrlObj.hidArr.length; j++){
                        var hideObj = ctrlObj.hidArr[j];
                        hidType = typeof hideObj.hidType != "undefined" ? hideObj.hidType:hidType;
                        if(self.val() == hideObj.hidKey){
                            if(self.prop("checked")){
                                _self.itemsShow(hideObj.hidName, hidType);
                            }else{
                                _self.itemsHide(hideObj.hidName, hidType);
                            }
                        }
                    }
                }
            });
        }
    }
};

View Code