Javascript 如果选中复选框，则下拉菜单选择“必需”

我将向您寻求有关HTML/Javascript的帮助（我不能使用Jquery）

我有一份有很多复选框的文件。通常，我选中一个或多个复选框，然后单击“保存”按钮以转到另一页。仅当我选中id为“cool”的复选框时，必须从id为“list”的下拉菜单中选择一个选项。 因此，如果我选中了“酷”复选框，但没有从下拉菜单中选择选项，则一定无法保存页面。 我尝试了几个javascript代码（脚本一和脚本二），但都不起作用。你能帮我吗

这是复选框

<input type="checkbox" id="cool" name="Performance" value="ON">

这是下拉菜单

<select id="list" name="Info">
         <option></option>
         <option>Cat</option>
         <option>Dog</option>
         <option>Bird</option>
        </select>

猫
狗
鸟

我试过的剧本

<script>
   function scriptone()
     {
       var checkBox=document.getElementById("cool");
       if (checkBox.checked == true)
          {     document.getElementById("list").required =  true;
          } 
      }
</SCRIPT>

函数scriptone（）
{
var checkBox=document.getElementById（“酷”）；
如果（checkBox.checked==true）
{document.getElementById（“list”）.required=true；
} 
}

脚本二我试过了

<script>
        document.getElementById("cool").addEventListener('change', function(){
        document.getElementById("list").required =  this.checked;
 }  
</SCRIPT>

document.getElementById（“cool”）.addEventListener（'change'，function（）{
document.getElementById（“列表”）.required=this.checked；
}  

---

如果您需要更多信息，请告诉我。谢谢。

您可以为每个元素设置一个侦听器，如果条件不符合要求，请禁用该按钮

const cool=document.getElementById（“cool”）；
const list=document.getElementById（“列表”）；
const submit=document.getElementById（“提交”）；
函数checkDisabled（）{
submit.disabled=cool.checked&（list.value.length==0）；
}
cool.addEventListener（'change'，function（））{
checkDisabled（）
})
list.addEventListener（'change'，function（））{
checkDisabled（）
})

猫
狗
鸟
接下来

您没有在

元素上设置

onClick

，这就是您的函数从未运行的原因

试试这个：

函数scriptone（）{
const checkBox=document.getElementById（“酷”）；
const listElem=document.getElementById（“列表”）；
如果（checkBox.checked==true）{
list.disabled=false；
}否则{
list.disabled=true；
}
}

猫
狗
鸟

您的“脚本二”确实有效，请参见中的代码

所需兵力


选择
猫
狗
鸟


（功能（）{
document.getElementById（“cool”）.addEventListener（'change'，function（）{
document.getElementById（“列表”）.required=this.checked；
});
})();

我把答案分为几个部分。它对你有帮助吗？是的，非常好的想法。它对你很有帮助。非常感谢！非常感谢！别忘了验证我的答案；）

<form action="/action_page.php">
  <label for="cool">Force Required</label>
  <input type="checkbox" id="cool" name="Performance" value="ON">
  <br />
  <label for="list">Select Choice</label>
  <select id="list" name="Info">
         <option></option>
         <option>Cat</option>
         <option>Dog</option>
         <option>Bird</option>
        </select>
  <br /> 
  <input type="submit">
</form>

(function() {
   document.getElementById("cool").addEventListener('change', function(){
        document.getElementById("list").required =  this.checked;
   });
})();