如果选择了正确的无线电按钮，则启用按钮的最有效方法

Question

javaScript的新手。我有一个带有一系列"是/否"单选按钮的表格，如果收音机按钮在任何时候，我都尝试制作函数以禁用"提交表单"按钮：

1. 如果未积极选择一个或多个无线电按钮
2. 如果选择一个或多个无线电按钮，则选择了"否"

如果选择了所有4个无线电按钮"是"，则应启用"提交表单"按钮disabled=false。

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

我必须仅使用JavaScript（以后我将在稍后学习）。为我了解的任何帮助将不胜感激。

谢谢。

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>

Answer 1

您可以检查 no checked的lenght是否优于零或没有收音机，请检查下面的工作示例。

希望这会有所帮助。

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>

Answer 2

另一种（ES6）方法。这样，您就不必使用inline clickhandlers，并且有很好的关注点。如果需要，您也可以在页面加载上执行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