根据下拉列表中的选定值启用文本框
Enabling a text box depending upon the selected value in a drop down
嗨,我有一个HTML页面,里面有一个文本框和一个下拉框。首次加载页面时,根据下拉列表中的值(已选择),需要启用或禁用文本框。我想使用 javascript 或 jquery 来做到这一点。我需要一点帮助。
<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>
现在我想要的是,当页面加载时,对于下拉列表选择了 TEXT 的行,文本框将被启用。但不是另一个。我真的很感激任何形式的帮助。
在jQuery中:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
稍微更改了 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');
}
}
顺便说一句,这是一个小提琴:http://jsfiddle.net/BbStP/1
相关文章:
- 使用javascript Without Ajax/Jquery在特定行中启用文本框
- 单击每个表格行中的复选框时启用文本框
- 禁用基于下拉列表选择 asp.net JavaScript 启用文本框
- 根据下拉列表中的选定值启用文本框
- 重新启用文本选择(Opera、webkit等)
- 根据输入启用文本框
- 通过JS功能在中继器中启用文本框
- 启用文本框选中复选框数组
- 如何在特定行中启用文本框
- 单选按钮未启用文本框
- 启用文本输入
- 与disableSelection功能相反,后者用于为特定HTML元素启用文本选择
- ASP.NET MVC Checboxes禁用/启用文本框
- 无法使用mootools启用文本框
- 当下拉框中的值被选中时,启用文本框
- 选中单选按钮导致在asp.net中启用文本框
- 如何在ChromeOS应用程序窗口中启用文本选择
- 禁用/启用文本框,单击单选按钮
- 使用javascript启用文本框
- 启用文本选择javascript