在条件下使用 Javascript 禁用下拉框
Disable Dropdown Box using Javascript on condition
我有一个表单,其中有几个单选按钮和一个下拉框。
我想要什么?
- 当我 select 单选按钮 'Receipt' 或 'Payment' 时,下拉框必须处于活动状态。
- 当我select单选按钮'Other Income'或'Other Expense'时,下拉框必须被禁用。
下面提到的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;
}
}
检查这个
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 页面的标签中必须是唯一的
你可以使用这样的东西:
-将 ID 设置为 id**Yes**
和 **No**
,然后在 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>
我有一个表单,其中有几个单选按钮和一个下拉框。
我想要什么?
- 当我 select 单选按钮 'Receipt' 或 'Payment' 时,下拉框必须处于活动状态。
- 当我select单选按钮'Other Income'或'Other Expense'时,下拉框必须被禁用。
下面提到的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;
}
}
检查这个
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 页面的标签中必须是唯一的
你可以使用这样的东西:
-将 ID 设置为 id**Yes**
和 **No**
,然后在 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>