JavaScript代码不工作
JavaScript代码不工作
提问于 2014-10-16 12:33:01
我试图控制下拉菜单的功能，规则是
- 两个框不能同时勾选。
- 如果只选择一个框，那么下拉列表就应该是可编辑的，否则它应该是只读的。
- 当勾选no时，下拉列表应该成为只读的。
- 当一个框被勾选时，下拉列表应该成为可编辑的(不管哪个框是勾选的)。
问题是，当我勾选一个框时，它变成可编辑的，但是当我选择第二个被禁用的框时，下拉菜单应该始终是可编辑的，只要一个框被取消勾选(两个框都必须取消勾选)，只有当下拉菜单被禁用时，这个下拉菜单就应该是可编辑的。
<html>
<head>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("1").disabled == false) {
document.getElementById("10").disabled = true;
//set default
document.getElementById("10").value = "OptionOne"
//first drop down
document.getElementById("1").disabled = true;
//set default
document.getElementById("1").value = "ReasonOne"
} else {
document.getElementById("1").disabled = false;
}
}
</script>
<script type="text/javascript">
var previousCheckId;
function toggle(chkBox) {
if (chkBox.checked) {
if (previousCheckId) {
document.getElementById(previousCheckId).checked = false;
}
previousCheckId = chkBox.getAttribute('id');
}
}
</script>
</head>
<body>
<input type="checkbox" id="chkBox100" onClick="myFunction();toggle(this);"/>
<input type="checkbox" id="chkBox121" onClick="myFunction();toggle(this);"/>
<select disabled id="1" >
<option value="OptionOne">First Option</option>
<option value="OptionTwo">Second Option</option>
</select>
<select disabled id="10" >
<option value="ReasonOne">First Option</option>
<option value="ReasonTwo">SecondOption</option>
</select>
</body>
</html>回答 2
Stack Overflow用户
发布于 2014-10-16 13:00:58
你的意思是这样的吗?还是你想把每个盒子分开？你的问题描述得很糟糕。但是作为一个额外的信息:如果您想要读取复选框值，您应该得到复选框值，而不是监视状态的选项菜单！
<html>
<head>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("chkBox100").checked) {
//first drop down
document.getElementById("1").disabled = false;
//set default
document.getElementById("1").value = "ReasonOne"
} else {
document.getElementById("1").disabled = true;
}
if (document.getElementById("chkBox121").checked) {
//second drop down
document.getElementById("10").disabled = false;
//set default
document.getElementById("10").value = "ReasonOne"
} else {
document.getElementById("10").disabled = true;
}
}
</script>
<script type="text/javascript">
function toggle1() {
if (document.getElementById("chkBox100").checked) {
document.getElementById("chkBox121").checked = false;
}
}
function toggle2() {
if (document.getElementById("chkBox121").checked) {
document.getElementById("chkBox100").checked = false;
}
}
</script>
</head>
<body>
<input type="checkbox" id="chkBox100" onClick="toggle1();myFunction();"/>
<input type="checkbox" id="chkBox121" onClick="toggle2();myFunction();"/>
<select disabled id="1" >
<option value="OptionOne">First Option</option>
<option value="OptionTwo">Second Option</option>
</select>
<select disabled id="10" >
<option value="ReasonOne">First Option</option>
<option value="ReasonTwo">SecondOption</option>
</select>
</body>
</html>Stack Overflow用户
发布于 2014-10-16 13:01:45
<html>
<head>
<script type="text/javascript">
function myFunction() {
if(document.getElementById("chkBox100").checked){
document.getElementById("1").disabled = false;
document.getElementById("10").value = "ReasonOne";
document.getElementById("10").disabled = true;
}
if(document.getElementById("chkBox121").checked){
document.getElementById("10").disabled = false;
document.getElementById("1").value = "OptionOne";
document.getElementById("1").disabled = true;
}
}
</script>
</head>
<body>
<form id="radioButtons">
<input type="radio" name="buttons" id="chkBox100" onClick="myFunction();"/>
<input type="radio" name="buttons" id="chkBox121" onClick="myFunction();"/>
</form>
<select disabled id="1" >
<option value="OptionOne">First Option</option>
<option value="OptionTwo">Second Option</option>
</select>
<select disabled id="10" >
<option value="ReasonOne">First Option</option>
<option value="ReasonTwo">SecondOption</option>
</select>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26404583
复制相关文章
相似问题
腾讯云开发者
