CODEWITHSUNDEEP
javascriptjqueryhtml
Matt B
Matt B

Reputation: 187

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>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>

Upvotes: 0

Views: 183

Answers (3)

passion
passion

Reputation: 1360

<html>
<head>
<body>
<select onchange="func(this)" 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>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox" disabled/>
<script>
	function func(obj){
	document.getElementById('otherbox').setAttribute('disabled',true);
	if(obj.value == 4)
		document.getElementById('otherbox').removeAttribute('disabled');
 
	}
</script>
</body>
</html>

An implementation without Jquery

Upvotes: 1

guradio
guradio

Reputation: 15565

$('#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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>
</select>
<br>
<br>
<label for="Other">Other:</label>
<input type="text" name="Other" id="otherbox" />

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150080

Maybe a little something like this:

$(document).ready(function() {
  $("#list").change(function() {
    $("#otherbox").prop("disabled", this.value != "4");  
  }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>
</select>
<br><br>
<label for="Other">Other: </label>
<input type="text" name="Other" id="otherbox"/>

Upvotes: 1

Related Questions