Question

我有一个带有选项列表的选择器。其中一个选项是＆＃39;其他＆＃39;在这种情况下，用户可以在下面的文本框中输入自己的选项。

如果“其他”文本框禁用并显示为灰色，则该文本框只能变为活动状态。选择了选项？

<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

也许有点像这样：

$(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

＆＃13;

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

＆＃13;

没有Jquery的实现

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

3 个答案: