通过js控制页面按钮的置灰与清零

页面效果:


要求:选择了最小分期或最大分期两个下拉框,将分期期数的多选框置灰并清除已经选中项,
        选中了多选框分期期数,,将最大分期与最小分期置灰并清零.
此三个目标框的代码为:
         <div class="col-sm-6">
                    <#select id="minPeriod" name="最小分期" underline="true" value="">
                        <option value=""></option>
                        <option value="3">3</option>
                        <option value="6">6</option>
                        <option value="9">9</option>
                        <option value="12">12</option>
                        <option value="18">18</option>
                        <option value="24">24</option>
                        <option value="36">36</option>
                    </#select>
                    <#select id="maxPeriod" name="最大分期" underline="true" value="">
                        <option value=""></option>
                        <option value="3">3</option>
                        <option value="6">6</option>
                        <option value="9">9</option>
                        <option value="12">12</option>
                        <option value="18">18</option>
                        <option value="24">24</option>
                        <option value="36">36</option>
                    </#select>
                </div>
                <div class="col-sm-9">
                <label>分期期数</label>
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="3"/>3期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="6"/>6期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="9"/>9期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="12"/>12期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="18"/>18期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="24"/>24期
<input name="allowPeriod" id="allowPeriod" type="checkbox" value="36"/>36期
 </div>

        </div>
实现需求效果的js代码:
//点击触发:选了最小分期,分期期数只读且全部清除选中

$("#minPeriod").click(function(){
setAllowPeriodDisabledByMin();
});  

//点击触发:选了最大分期,分期期数只读且全部清除选中
$("#maxPeriod").click(function(){  
setAllowPeriodDisabledByMax();
});

function setAllowPeriodDisabledByMin(){
if(!$("#minPeriod").val()==''){
$("input[id='allowPeriod']").each(function(){ 
$(this).attr("checked",false);
$(this).attr("disabled",true);   
});
}else{
$("input[id='allowPeriod']").each(function(){ 
$(this).attr("disabled",false);   
});
}
}

function setAllowPeriodDisabledByMax(){
if(!$("#maxPeriod").val()==''){
$("input[id='allowPeriod']").each(function(){ 
$(this).attr("checked",false); 
$(this).attr("disabled",true);   
});
}else{
$("input[id='allowPeriod']").each(function(){ 
$(this).attr("disabled",false);   
});
}
}

//点击触发:选了分期期数,最大分期和最小分期两个下拉框只读且置空
$("input[id='allowPeriod']").click(function(){
setMinPeriodAndMaxPeriodDisabled();
});

function setMinPeriodAndMaxPeriodDisabled(){
var a = 0, b = 0;//b可以统计未选中的项,无用可以删除.
$("input[name='allowPeriod']").each(function(){ 
if($(this).is(':checked')){
a++;
}else{
b++;
} 
});
if(a == 0){
$("select[id='minPeriod']").attr("disabled",false);   
$("select[id='maxPeriod']").attr("disabled",false);
}else{
$("select[id='minPeriod']").val('');
$("select[id='maxPeriod']").val('');
$("select[id='minPeriod']").attr("disabled",true);   
$("select[id='maxPeriod']").attr("disabled",true);   
}

}

另外,点击提交时,对多选框的选中项进行收集处理,将所有的选中项拼接成一个数组,直接传递:
var allowPeriods = document.getElementsByName("allowPeriod");
var allowPeriodArray = [];
for (k in allowPeriods) {
    if (allowPeriods[k].checked){

    allowPeriodArray.push(allowPeriods[k].value);
    }
}
注意点:将一个目标对象置灰时:$("select[id='minPeriod']").attr("disabled",true)
           不置灰时:$("select[id='minPeriod']").attr("disabled",false); 
           此处使用true和false,不能带引号,如果使用引号,true可以起作用,因为,disabled属性,只要有值就会起作用,置灰,但是,使用带引号的"false"时,仍然置灰!
此处使用jQuery选择器.click,直接触发,也可以在目标输入框直接加,只是比较麻烦.