在条件下使用 Javascript 禁用下拉框答案

【问题标题】：Disable Dropdown Box using Javascript on condition在条件下使用 Javascript 禁用下拉框
【发布时间】：2016-01-09 02:58:16
【问题描述】：

我有一个表单，其中有几个单选按钮和一个下拉框。

我想要什么？

当我选择单选按钮“收据”或“付款”时，下拉框必须处于活动状态。
当我选择单选按钮“其他收入”或“其他费用”时，必须禁用下拉框。

下面提到了我尝试过的 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;
    }
}

【问题讨论】：

标签： javascript html forms radio-button html-select

【解决方案1】：

检查一下

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 页面中的标签中必须是唯一的

【讨论】：

【解决方案2】：

你可以使用这样的东西：

- 将 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>

【讨论】：