通过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,直接触发,也可以在目标输入框直接加,只是比较麻烦.