JavaScript代码不工作_Javascript

JavaScript代码不工作

javascript

JavaScript代码不工作,javascript,Javascript,我试图控制下拉菜单的功能，规则如下不能同时勾选两个框如果仅选择一个框，则下拉列表应可编辑，否则应为只读勾选“否”时，下拉列表应变为只读勾选一个框时，下拉列表应可编辑（无论勾选哪个框）问题是，当我勾选一个框时，它将变为可编辑框，但当我选择第二个框时，它将变为禁用框，即下拉框只要一个框被取消勾选（两个框都必须取消勾选），向下应该始终是可编辑的那么，是否应禁用下拉菜单 <html> <head> <script type="text/javasc

我试图控制下拉菜单的功能，规则如下

不能同时勾选两个框
如果仅选择一个框，则下拉列表应可编辑，否则应为只读
勾选“否”时，下拉列表应变为只读
勾选一个框时，下拉列表应可编辑（无论勾选哪个框）

问题是，当我勾选一个框时，它将变为可编辑框，但当我选择第二个框时，它将变为禁用框，即下拉框只要一个框被取消勾选（两个框都必须取消勾选），向下应该始终是可编辑的那么，是否应禁用下拉菜单

    <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>


函数myFunction（）{
if（document.getElementById（“1”）.disabled==false）{
document.getElementById（“10”）.disabled=true；
//设置默认值
document.getElementById（“10”）.value=“OptionOne”
//第一个下拉列表
document.getElementById（“1”）.disabled=true；
//设置默认值
document.getElementById（“1”）.value=“ReasonOne”
}否则{
document.getElementById（“1”）.disabled=false；
}
}
var-previousCheckId；
功能切换（chkBox）{
如果（chkBox.checked）{
如果（先前的检查ID）{
document.getElementById（previousCheckId）.checked=false；
}
previousCheckId=chkBox.getAttribute（'id'）；
}
}
第一选择
第二种选择
第一选择
第二选择

您的意思是这样的吗，还是希望每个盒子都分开？你的问题描述得很糟糕。但作为一个额外的信息：如果你想阅读复选框值，你应该得到复选框值，而不是监控选项菜单的状态

<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>


函数myFunction（）{
if（document.getElementById（“chkBox100”）.选中）{
//第一个下拉列表
document.getElementById（“1”）.disabled=false；
//设置默认值
document.getElementById（“1”）.value=“ReasonOne”
}否则{
document.getElementById（“1”）.disabled=true；
}
if（document.getElementById（“chkBox121”）.选中）{
//第二个下拉列表
document.getElementById（“10”）.disabled=false；
//设置默认值
document.getElementById（“10”）.value=“ReasonOne”
}否则{
document.getElementById（“10”）.disabled=true；
}
}
函数切换1（）{
if（document.getElementById（“chkBox100”）.选中）{
document.getElementById（“chkBox121”）.checked=false；
}
}
函数切换2（）{
if（document.getElementById（“chkBox121”）.选中）{
document.getElementById（“chkBox100”）.checked=false；
}
}
第一选择
第二种选择
第一选择
第二选择


函数myFunction（）{
if（document.getElementById（“chkBox100”）.选中）{
document.getElementById（“1”）.disabled=false；
document.getElementById（“10”）.value=“ReasonOne”；
document.getElementById（“10”）.disabled=true；
}
if（document.getElementById（“chkBox121”）.选中）{
document.getElementById（“10”）.disabled=false；
document.getElementById（“1”）.value=“OptionOne”；
document.getElementById（“1”）.disabled=true；
}
}
第一选择
第二种选择
第一选择
第二选择

您应该对问题标题进行更详细的描述。上面的代码按照您的预期工作。我用单选按钮代替复选框，因为，嗯，这就是它们的用途。一次只能选择一个单选按钮。我们只有一个函数，每次选中其中一个单选按钮时都会调用它，它只需检查选中的单选按钮，并基于此应用一些规则。如果您有问题，请告诉我，如果这回答了您的问题，请不要忘记接受答案。使用复选框的原因是，您可以禁用这两个选项框并发送自定义值。对于单选按钮，您总是选择其中一个按钮，并且必须从选项中做出决定。

<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>