除非选择选择器选项，否则禁用文本输入

Question

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"/>

Answer 1

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"/>

Answer 2

 $('#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" />

Answer 3

 <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 没有Jquery的实现

除非选择选择器选项，否则禁用文本输入

问题描述

3 个解决方案

解决方案1
1 2016-09-14 03:24:19

解决方案2
1 已采纳 2016-09-14 03:26:52

解决方案3
1 2016-09-14 03:28:47

除非选择选择器选项，否则禁用文本输入

问题描述

3 个解决方案

解决方案1 1 2016-09-14 03:24:19

解决方案2 1 已采纳 2016-09-14 03:26:52

解决方案3 1 2016-09-14 03:28:47

解决方案1
1 2016-09-14 03:24:19

解决方案2
1 已采纳 2016-09-14 03:26:52

解决方案3
1 2016-09-14 03:28:47