如果选择了正确的单选按钮，启用按钮的最有效方法是什么？答案

【问题标题】：The most efficient way to enable a button if the correct radio-buttons are selected?如果选择了正确的单选按钮，启用按钮的最有效方法是什么？
【发布时间】：2017-04-10 07:48:44
【问题描述】：

这里是 JavaScript 新手。我有一个带有一系列“是/否”单选按钮的表单，如果单选按钮是，我尝试制作一个功能来禁用“提交表单”按钮，随时：

如果没有主动选择一个或多个单选按钮
如果一个或多个单选按钮选择了“否”

如果所有 4 个单选按钮都选择了“是”，则应启用“提交表单”按钮disabled=false。

我真的很想了解，但我认为我没有达到我想要的效果。

为此，我必须只使用 javascript（稍后我将学习 jQuery）。任何对我理解的帮助将不胜感激。

谢谢。

function Check(e) {
  var button = document.getElementById("submit");

  if (button.disabled == true) {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
}

<form>
  <input type="datetime-local">
  <br>

  <input name="Q1" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q1" type="radio" value="no" required>No
  <br>

  <input name="Q2" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q2" type="radio" value="no" required>No
  <br>

  <input name="Q3" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q3" type="radio" value="no" required>No
  <br>

  <input name="Q4" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q4" type="radio" value="no" required>No
  <br>

  <button id="submit" type="submit" name="submit" disabled>
    SUBMIT FORM
  </button>
</form>

【问题讨论】：

标签： javascript html forms button radio-button

【解决方案1】：

您可以检查 no checked 的长度是否优于零或没有检查无线电，检查下面的工作示例。

希望这会有所帮助。

function Check(el) {
  var button = document.getElementById("submit");

  var nbr_of_checked_no = document.querySelectorAll('input[type=radio][value=no]:checked').length;
  var nbr_checked_radios = document.querySelectorAll('input[type=radio]:checked').length;

  /*
     'nbr_of_checked_no>0' : mean if at least one of the 'no' options checked
     'nbr_checked_radios==0' : mean if no radio button is checked 
  */
  if (nbr_of_checked_no>0 || nbr_checked_radios<4) {
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

<form>
  <input name="Q1" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q1" type="radio" value="no"  onclick="Check(this)"required>No
  <br>

  <input name="Q2" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q2" type="radio" value="no"  onclick="Check(this)"required>No
  <br>

  <input name="Q3" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q3" type="radio" value="no"  onclick="Check(this)"required>No
  <br>

  <input name="Q4" type="radio" value="yes" onclick="Check(this)" required>Yes
  <input name="Q4" type="radio" value="no"  onclick="Check(this)" required>No
  <br>

  <button id="submit" type="submit" name="submit" disabled>
    SUBMIT FORM
  </button>
</form>

【讨论】：

如果只选择了一个单选按钮而其他单选按钮未选中，是否有办法防止提交按钮如此快速地启用？
不确定您的意思，请尝试澄清更多。
例如，当表单加载并且用户单击任何一个“是”单选按钮时，即使其他 3 个单选按钮尚未填充，该按钮也会自动启用...有没有办法在所有 4 个单选按钮都选择“是”之前禁用提交按钮？

【解决方案2】：

另一种 (ES6) 方法。这样您就不必使用内联点击处理程序，并且您可以很好地分离关注点。如果需要，您还可以在页面加载时执行checkIfBtnShouldBeEnabled()。

const submit = document.getElementById('submit');
const allRadios = document.querySelectorAll('.your-form input[type="radio"]');

function checkIfBtnShouldBeEnabled() {
  let enabled = true;
  const yesRadios = document.querySelectorAll('.your-form input[type="radio"][value="yes"]');

  yesRadios.forEach(radio => {        
    if (!radio.checked){
      enabled = false;
      return false;
    }
  });

  submit.disabled = enabled ? false : true;
}

allRadios.forEach(radio => {
  radio.addEventListener('change', checkIfBtnShouldBeEnabled);
});

Codepen：http://codepen.io/anon/pen/qqXdOO

【讨论】：