Question

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

两个方框无法同时勾选
如果只选择了一个框，那么下拉列表应该是可编辑的，否则它应该是只读的
只有在勾选时才会读取下拉列表
当勾选一个方框时，下拉菜单应该可以编辑（无论选中哪个方框都无关紧要）

问题是，当我勾选一个框时它会变得可编辑但是当我选择第二个框时它会被禁用，掉线只要只要一个方框被勾选（两个方框都必须未被取消），只要一个方框被勾选，则应该始终可以编辑然后应该禁用下拉菜单

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

Answer 1

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

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

Answer 2

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

JavaScript代码无效

2 个答案: