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