頁面效果:

要求:選擇了最小分期或最大分期兩個下拉框,將分期期數的多選框置灰並清除已經選中項,

        選中了多選框分期期數,,將最大分期與最小分期置灰並清零.

此三個目標框的程式碼為:

         <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,直接觸發,也可以在目標輸入框直接加,只是比較麻煩.