[英]Best way to enable/disable elements in the form based on selected value in drop down menu?
[英]Enable an HTML form text box based on the value of a drop down menu in the same form?
我是HTML的新手,我知道这里曾多次问过这个问题,但是我尝试了所有各种解决方案,但没有一个对我有用。 从下拉菜单中选择两个值之一时,我正在尝试激活一个字段(默认为禁用)。 这是我为完成任务而编写的JavaScript函数。
function changeTextBox() {
comp = document.getElementById('comparator');
if(comp.value=='equalto'||comp.value=='notequalto')
document.getElementById('localevalue').disable=false;
else
document.getElementById('localevalue').disable=true;
}
这是下拉菜单
<label style="font-size:16px" for="comparator">Comparator:</label>
<select id="comparator" name="comparator" onChange="changeTextBox();">
<option value="lessthan">Less Than</option>
<option value="lessthanequalto">Less Than or Equal To</option>
<option value="greaterthan">Greater Than</option>
<option value="greaterthanequalto">Greater Than or Equal To</option>
<option value="equalto">Equal To</option>
<option value="notequalto">Not Equal To</option>
<option value="exists">Exists</option>
</select>
这是从下拉菜单中选择“等于”或“不等于”时需要激活的字段。
<label style="font-size:16px" for="value">Value:</label>
<input type="number" id="value" disabled/>
但是,当我选择其中一个字段时,该框保持禁用状态。 谁能告诉我我在做什么错?
这应该工作
function changeTextBox() {
var comp = document.getElementById('comparator');
if(comp.value=='equalto'||comp.value=='notequalto')
document.getElementById('value').disabled=false;
else
document.getElementById('value').disabled=true;
}
编辑:对不起,页面已加载,我还没有注意到dandavis的评论。 除此之外,在我的回复中,我已将document.getElementById('localevalue')更改为document.getElementById('value')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stack Overflow</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function changeTextBox()
{
var val=$('#comparator').val();
alert(val);
if(val==='equalto' || val==='notequalto')
{
$('#value').removeAttr("disabled");
}
else{$('#value').prop('disabled', true);}
}
</script>
</head>
<body>
<label style="font-size:16px" for="comparator">Comparator:</label>
<select id="comparator" name="comparator" onChange="changeTextBox();">
<option value="lessthan">Less Than</option>
<option value="lessthanequalto">Less Than or Equal To</option>
<option value="greaterthan">Greater Than</option>
<option value="greaterthanequalto">Greater Than or Equal To</option>
<option value="equalto">Equal To</option>
<option value="notequalto">Not Equal To</option>
<option value="exists">Exists</option>
</select>
<label style="font-size:16px" for="value">Value:</label>
<input type="number" id="value" disabled/>
</body>
</html>
欢呼:)
问题是我应该在我的JS函数中使用.disabled而不是.disable。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.