如果选中复选框，则需要下拉菜单选择

Question

我要请你帮忙处理 HTML/Javascript（我不能使用 Jquery）。

我有一个包含很多复选框的文档。通常我会选中一个或多个复选框，然后单击“保存”按钮以传递到另一个页面。只有当我选中 ID 为“cool”的复选框时，才必须从 ID 为“list”的下拉菜单中选择一个选项。 因此，如果我选择复选框“cool”并且我没有从下拉菜单中选择选项，则一定无法保存页面。 我用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>

我试过的脚本二

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

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

Answer 1

你可以为每个元素设置一个监听器，如果条件不符合要求，可以禁用按钮。

const cool = document.getElementById("cool");
const list = document.getElementById("list");
const submit = document.getElementById("submit");

function checkDisabled() {
  submit.disabled = cool.checked && (list.value.length === 0);
}

cool.addEventListener('change', function(){
  checkDisabled()
})

list.addEventListener('change', function(){
  checkDisabled()
})

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

<select id="list" name="Info">
         <option></option>
         <option value="cat">Cat</option>
         <option value="dog">Dog</option>
         <option value="bird">Bird</option>
</select>

<button type="submit" id="submit">Next</button>

您可以做得更好，因为它对 UX 不太友好：仅在使用 visibility 属性选中复选框时才显示下拉菜单。 另外，分解代码：

const cool = document.getElementById("cool");
const list = document.getElementById("list");
const submit = document.getElementById("submit");

function checkDisabled() {
  submit.disabled = cool.checked && (list.value.length === 0);
  list.style.visibility = cool.checked ? 'visible' : 'hidden';
}

[cool, list].forEach((x) => x.addEventListener('change', function(){
  checkDisabled()
}))

checkDisabled();

<input type="checkbox" id="cool" name="Performance" value="ON">
<label for="cool">Cool</label>

<select id="list" name="Info">
         <option></option>
         <option value="cat">Cat</option>
         <option value="dog">Dog</option>
         <option value="bird">Bird</option>
</select>

<button type="submit" id="submit">Next</button>

每次都写document.getElementById 会很烦人，如果你不使用任何库，我建议你使用简写：

const $ = (x) => document.getElementById(x)

function checkDisabled() {
  $("submit").disabled = $("cool").checked && ($("list").value.length === 0);
  $("list").style.visibility = $("cool").checked ? 'visible' : 'hidden';
}

[$("cool"), $("list")].forEach((x) => x.addEventListener('change', function(){
  checkDisabled()
}))

checkDisabled();

<input type="checkbox" id="cool" name="Performance" value="ON">
<label for="cool">Cool</label>

<select id="list" name="Info">
         <option></option>
         <option value="cat">Cat</option>
         <option value="dog">Dog</option>
         <option value="bird">Bird</option>
</select>

<button type="submit" id="submit">Next</button>

我还建议您发出警告，如下所示：

const $ = (x) => document.getElementById(x)

function checkDisabled() {
  $('submit').disabled = $('cool').checked && ($('list').value.length === 0);
  $('list').style.visibility = $('cool').checked ? 'visible' : 'hidden';
  $('error').style.display = ($('cool').checked && $('list').value.length === 0) ? 'inline' : 'none';
}

[$("cool"), $("list")].forEach((x) => x.addEventListener('change', function(){
  checkDisabled()
}))

checkDisabled();

#error {
  color: red;
}

<input type="checkbox" id="cool" name="Performance" value="ON">
<label for="cool">Cool</label>

<select id="list" name="Info">
         <option value="">-- choose an animal--</option>
         <option value="cat">Cat</option>
         <option value="dog">Dog</option>
         <option value="bird">Bird</option>
</select>

<button type="submit" id="submit">Next</button>
<span id="error">Choose an animal</span>

Answer 2

您没有在<input /> 元素上设置onClick，这就是您的函数永远不会运行的原因。

试试这个：

function scriptone() {
  const checkBox = document.getElementById("cool");
  const listElem = document.getElementById("list");
  if (checkBox.checked == true) {
    list.disabled = false;
  } else {
    list.disabled = true;
  }
}

<input type="checkbox" id="cool" name="Performance" value="ON" onclick="scriptone()">
<select id="list" name="Info">
  <option></option>
  <option>Cat</option>
  <option>Dog</option>
  <option>Bird</option>
</select>

Answer 3

您的“脚本二”确实有效，请在 JS Fiddle 中查看您的代码。

<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;
   });
})();