2015-10-11 44 views
2

我有一個窗體,其中有幾個單選按鈕和一個下拉框。在條件下使用Javascript禁用下拉框

我想要什麼?

  1. 當我選擇單選按鈕「收據」或「付款」時,下拉框必須處於活動狀態。
  2. 當我選擇單選按鈕「其他收入」或「其他費用」時,必須禁用下拉框。

我試過的HTML和JS如下所述。任何幫助,將不勝感激。

HTML

<label class="radio-inline"><input type="radio" name="type" id="type" value="receipt" onClick="party_check()" />Receipt</label> 

<label class="radio-inline"><input type="radio" name="type" id="type" value="payment" onClick="party_check()" />Payment</label> 

<label class="radio-inline"><input type="radio" name="type" id="type" value="other income" onClick="party_check()" />Other Income</label> 

<label class="radio-inline"><input type="radio" name="type" id="type" value="other expense" onClick="party_check()" />Other Expense</label> 

<select name="party" id="party" class="form-control"> 
<option value="">Please select an option</option> 
<option value="1">Option 1</option> 
<option value="2">Option 2</option> 
</select> 

JS

function party_check(){ 
    if((document.type[0].checked) || (document.type[1].checked)){ 
     document.getElementById("party").disabled=false; 
    } 
    else 
    { 
     document.getElementById("party").disabled=true; 
    } 
} 

回答

2

入住這

的Html

<label class="radio-inline"><input type="radio" name="type" value="receipt" onclick="party_check(this)" />Receipt</label> 

<label class="radio-inline"><input type="radio" name="type" value="payment" onclick="party_check(this)" />Payment</label> 

<label class="radio-inline"><input type="radio" name="type" value="other income" onclick="party_check(this)" />Other Income</label> 
<label class="radio-inline"><input type="radio" name="type" value="other expense" onclick="party_check(this)" />Other Expense 
</label> 

<select name="party" id="party" class="form-control"> 
    <option value="">Please select an option</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
</select> 

的Javascript

function party_check(rad){ 
    if(rad.value == "receipt" || rad.value == "payment"){ 
     document.getElementById("party").disabled=false; 
    }else{ 

     document.getElementById("party").disabled=true; 
    } 
} 

「id」 屬性的值必須在整個標籤獨特的HTML頁面

+0

它完美。 –

+0

您可以將上述解決方案標記爲正確。 – Jsm

0

U可以使用這樣的:

- 設置一個編號爲**Yes****No**的ID並在JS中使用click function

$("#Yes").click(function() { 
 
    $("#party").attr("disabled", false); 
 
    //$("#discountselection").show(); //To Show the dropdown 
 
}); 
 
$("#No").click(function() { 
 
    $("#party").attr("disabled", true); 
 
    //$("#discountselection").hide();//To hide the dropdown 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<label class="radio-inline"><input type="radio" name="type" id="Yes" value="receipt" onClick="party_check()" />Receipt</label> 
 

 
<label class="radio-inline"><input type="radio" name="type" id="Yes" value="payment" />Payment</label> 
 

 
<label class="radio-inline"><input type="radio" name="type" id="No" value="other income" />Other Income</label> 
 

 
<label class="radio-inline"><input type="radio" name="type" id="No" value="other expense" />Other Expense</label> 
 

 
<select name="party" id="party" class="form-control"> 
 
<option value="">Please select an option</option> 
 
<option value="1">Option 1</option> 
 
<option value="2">Option 2</option> 
 
</select>