html - Disable Dropdown Box using Javascript on condition - Stack Overflow

admin管理员组

文章数量:1332404

I have a form in which there are a few radio buttons and a dropdown box.

What I want?

1. When I select the radio button 'Receipt' or 'Payment' the dropdown box must be active.
2. When I select the radio button 'Other Ine' or 'Other Expense', the dropdown box must be disabled.

The HTML and JS I've tried is mentioned below. Any help would be appreciated.

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 ine" onClick="party_check()" />Other Ine</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;
    }
}

I have a form in which there are a few radio buttons and a dropdown box.

What I want?

1. When I select the radio button 'Receipt' or 'Payment' the dropdown box must be active.
2. When I select the radio button 'Other Ine' or 'Other Expense', the dropdown box must be disabled.

The HTML and JS I've tried is mentioned below. Any help would be appreciated.

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 ine" onClick="party_check()" />Other Ine</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

Share Improve this question Follow asked Oct 11, 2015 at 16:35 Ahamed ZulfanAhamed Zulfan 13522 gold badges33 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Check this

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 ine" onclick="party_check(this)" />Other Ine</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" attribute's value must be unique across the tags in the html page

U can use something like this :

-Set a ID to id**Yes** and **No**and do that in JS with 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./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 ine"  />Other Ine</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>

本文标签： htmlDisable Dropdown Box using Javascript on conditionStack Overflow