我正在尝试控制下拉菜单的功能，规则是
- 两个框不能同时勾选
- 仅当选择一个框时，下拉列表才可编辑，否则应为只读
- 当未勾选“否”时，下拉列表应变为只读
- 勾选一个框后，下拉菜单应变为可编辑(勾选哪个框并不重要)
问题是，当我勾选一个框时，它变得可编辑，但当我选择第二个框时，它会被禁用，删除 只要勾选了一个框，取消勾选了一个框(两个框都必须取消勾选)，down 就应该始终是可编辑的 那么应该禁用下拉菜单
<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>
最佳答案
您的意思是类似的意思还是您想要每个盒子分开？ 你的问题描述得很糟糕。但作为额外的信息:如果你想读取复选框值，你应该获取复选框值，而不是监视选项菜单的状态!
<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>
关于JavaScript 代码不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26404583/