Matt B Matt B - 1 year ago 90
HTML Question

Disable text input unless a selector option is chosen

I have a selector with a list of options. One of the options is 'other' in which case the user may enter their own option in a textbox below.

How can I make the textbox disabled and greyed out only to become active when the 'other' option is selected?

<select id = "list" name="Optionlist">
<option value = "1">Option one</option>
<option value = "2">Option two</option>
<option value = "3">Option three</option>
<option value = "4">Other</option>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>

Answer Source

$('#list').change(function() {//on change of select 
  $('#otherbox').prop('disabled', $('option:selected', this).val() != '4');//check if value is not other then disable
}).change();//call on change manually so on load will run the change event
<script src=""></script>
<select id="list" name="Optionlist">
  <option value="1">Option one</option>
  <option value="2">Option two</option>
  <option value="3">Option three</option>
  <option value="4">Other</option>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download