[英]Enabling a text box depending upon the selected value in a drop down
Hi I have an HTML page which has a text box and a dropdown box. 嗨,我有一个HTML页面,其中有一个文本框和一个下拉框。 When the page is loading for the first time, then depending upon the value in the drop down(Selected) the text box needs to be enabled or disabled.
首次加载页面时,根据下拉列表中的值(选定),需要启用或禁用文本框。 I want to do this using javascript or jquery.
我想用javascript或jquery来做这件事。 I need a little help.
我需要一些帮助。
<table>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type1" id="field_type">
<option value="TEXT" SELECTED="">TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" >DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type2" id="field_type">
<option value="TEXT" >TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" SELECTED="">DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
</table>
Now what I want is, when the page loads, for the row where the drop down is having TEXT selected, the text box will get enabled. 现在我想要的是,当页面加载时,对于下拉选择了TEXT的行,文本框将被启用。 But not for the other.
但不是为了另一个。 I would really appreciate any kind of help.
我真的很感激任何帮助。
In jQuery: 在jQuery中:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
Changed Scott's code a bit so that it works on your load: 更改了Scott的代码,以便它适用于您的负载:
$(document).ready(function() {
$('select').each(function() {
var comboBox = $(this);
checkValue(comboBox);
comboBox.on('change', function() {
checkValue(comboBox);
});
});
});
function checkValue(comboBox) {
if (comboBox.val() == "TEXT") {
comboBox.parents('td').siblings('td').children('input').removeAttr('disabled');
}
else {
comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled');
}
}
Here's a fiddle btw: http://jsfiddle.net/BbStP/1 这是一个小提琴: http : //jsfiddle.net/BbStP/1
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.