项目中遇到多层级单选，多选按钮的置灰/隐藏操作。特意写了一个公用组件：
//置灰方式
//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);
}
}
}
}
});
}
}
};
调用方式：
<script>
$(document).ready(function(){
HidItemUtil.controllerArr.push({
ctrlName:"gds_ffshebei",
hidArr:[{
hidKey:"发放三合一红盘",
hidName:["gds_hpbmbh","gds_hpsq"]
},{
hidKey:"发放三合一设备",
hidName:["gds_sbbmbh","gds_sbsq"]
},{
hidKey:"发放其他设备",
hidName:["gds_qtsbqibmbh","span1",'gds_ysmiji','gds_xmiji']
},{
hidKey:"按申请要求配置相关端口及策略",
hidName:["gds_celue"]
},{
hidKey:"其他",
hidName:["gds_qita"]
}]
});
HidItemUtil.controllerArr.push({
ctrlName:"gds_qtsbqibmbh",
hidArr:[{
hidKey:"转换线",
hidName:["gds_qtsbzhxbmbh"]
},{
hidKey:"外接光驱",
hidName:["gds_qtsbwjgqbmbh"]
},{
hidKey:"其他",
hidName:["gds_sbbmbhqt","p1","level3"]
}]
});
HidItemUtil.controllerArr.push({
ctrlName:"level3",
hidArr:[{
hidKey:"选择1",
hidName:["level41"]
},{
hidKey:"选择2",
hidName:["level42"]
},{
hidKey:"选择3",
hidName:["level43"]
}]
});
HidItemUtil.run();
}); </script>
组件根据name匹配，html如下：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.10.2.min.js" ></script>
<script src="HidItemUtil.js" ></script> <script>
$(document).ready(function(){
HidItemUtil.controllerArr.push({
ctrlName:"gds_ffshebei",
hidArr:[{
hidKey:"发放三合一红盘",
hidName:["gds_hpbmbh","gds_hpsq"]
},{
hidKey:"发放三合一设备",
hidName:["gds_sbbmbh","gds_sbsq"]
},{
hidKey:"发放其他设备",
hidName:["gds_qtsbqibmbh","span1",'gds_ysmiji','gds_xmiji']
},{
hidKey:"按申请要求配置相关端口及策略",
hidName:["gds_celue"]
},{
hidKey:"其他",
hidName:["gds_qita"]
}]
});
HidItemUtil.controllerArr.push({
ctrlName:"gds_qtsbqibmbh",
hidArr:[{
hidKey:"转换线",
hidName:["gds_qtsbzhxbmbh"]
},{
hidKey:"外接光驱",
hidName:["gds_qtsbwjgqbmbh"]
},{
hidKey:"其他",
hidName:["gds_sbbmbhqt","p1","level3"]
}]
});
HidItemUtil.controllerArr.push({
ctrlName:"level3",
hidArr:[{
hidKey:"选择1",
hidName:["level41"]
},{
hidKey:"选择2",
hidName:["level42"]
},{
hidKey:"选择3",
hidName:["level43"]
}]
});
HidItemUtil.run();
}); </script>
<tr style="height:23px;">
<td class="formInput" style="word-break:break-all;border-color:#666666;" rowspan="1" colspan="5">
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放三合一红盘" validate="{}" />发放三合一红盘 保密编号</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="a1" name="m:gds_wcxdsmjsjspjjc:gds_hpbmbh" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="红盘保密编号" validate="{maxlength:100}" /> 授权<span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="a2" name="m:gds_wcxdsmjsjspjjc:gds_hpsq" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="红盘授权" validate="{maxlength:100}" /></span></span>
</p>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放三合一设备" validate="{}" />发放三合一设备 保密编号</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="b1" name="m:gds_wcxdsmjsjspjjc:gds_sbbmbh" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="设备保密编号" validate="{maxlength:100}" /> 授权<span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="b2" name="m:gds_wcxdsmjsjspjjc:gds_sbsq" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="设备授权" validate="{maxlength:100}" /></span></span>
</p>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放其他设备" validate="{}" />发放其他设备</label>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="转换线" validate="{}" id="g1" />转换线</label>
<span style="display:inline-block;" name="span1" isflag="tableflag"><input id="c1" name="m:gds_wcxdsmjsjspjjc:gds_qtsbzhxbmbh" class="inputText" style="width:100px;" type="text" isflag="tableflag" lablename="其他设备转换线保密编号" validate="{maxlength:50}" /></span>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="外接光驱" validate="{}" id="g2" />外接光驱</label>
<span style="display:inline-block;" name="span1" isflag="tableflag"><input id="c2" name="m:gds_wcxdsmjsjspjjc:gds_qtsbwjgqbmbh" class="inputText" style="width:100px;" type="text" isflag="tableflag" lablename="其他设备外接光驱保密编号" validate="{maxlength:100}" /></span> <label><input name="m:gds_wcxdsmjsjspjjc:gds_qtsbqibmbh" type="radio" value="其他" validate="{}" id="g3" />其他</label>
<span style="display:inline-block;" name="span1" isflag="tableflag"> <input id="c3" name="m:gds_wcxdsmjsjspjjc:gds_sbbmbhqt" class="inputText" style="width:100px;" type="text" isflag="tableflag" lablename="设备保密编号其他" validate="{maxlength:100}" />
<p name="p1">
<label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择1" validate="{}" />选择1</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e4" name="m:gds_wcxdsmjsjspjjc:level41" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
<label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择2" validate="{}" />选择2</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e2" name="m:gds_wcxdsmjsjspjjc:level42" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
<label><input name="m:gds_wcxdsmjsjspjjc:level3" type="checkbox" value="选择3" validate="{}" />选择3</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e3" name="m:gds_wcxdsmjsjspjjc:level43" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
</p>
</span>
</p>
</p>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="按申请要求配置相关端口及策略" validate="{}" />按申请要求配置相关端口及策略</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="d1" name="m:gds_wcxdsmjsjspjjc:gds_celue" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="策略" validate="{maxlength:100}" /></span>
</p>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="发放红黑电源" validate="{}" />发放红黑电源</label>
</p>
<p>
<label><input name="m:gds_wcxdsmjsjspjjc:gds_ffshebei" type="checkbox" value="其他" validate="{}" />其他</label><span style="display:inline-block;" name="editable-input" isflag="tableflag"><input id="e1" name="m:gds_wcxdsmjsjspjjc:gds_qita" class="inputText" style="width:200px;" type="text" isflag="tableflag" lablename="其他" validate="{maxlength:100}" /></span>
</p>
</td>
</tr>