CODEWITHSUNDEEP
jquery
422
422

Reputation: 5770

disable input field based on select box choice

I eitehr want to HIDE a input element , until a select box value is chosen, or disable the input field unless a select box value is chosen. If that makes sense.

Here is some code, we wish to apply it to.

<div class="s_row_2 clearfix">
            <label><strong>Country</strong></label>
              <select id="country" name="country" style="width: 212px;">
                <option value="null" selected="selected" >--- Please Select---</option>

                <option value="nol">--- Not on this list ---</option>
                <option value="New Zealand">New Zealand</option>
                <option value="United Kingdom">United Kingdom</option> 
                <option value="United States">United States</option> 
                <option value="France">France</option> 
                <option value="Germany">Germany</option> 
                <option value="Spain">Spain</option> 
                <option value="Italy">Italy</option> 
                <option value="Canada">Canada</option>

              </select>

            <label class="required rightish"><strong>Other Country</strong></label><input type="text" name="othercountry" id="othercountry" size="30" />
        </div>

If user selects (nol - not on list) "Not on this List" option in select element.

Could we then make the Other country input box, required field. Or probably better hide this input field, and show only if "nol" value is selected.

Upvotes: 0

Views: 2259

Answers (1)

James Allardice
James Allardice

Reputation: 165941

You can bind an event listener to the change event and check the value of the select:

$("#country").change(function() {
    if(this.value === "nol") {
        $("#othercountry").show();
    }
});

Obviously, you will probably want to extend that to hide the input again if another value is selected, and perhaps show/hide the label element too.

Upvotes: 2

Related Questions