5120bee 5120bee - 15 days ago 5
HTML Question

The most efficient way to enable a button if the correct radio-buttons are selected?

New to javascript here. I have a form with a series of "Yes/No" radio buttons and I tried making a function to disable the "Submit Form" button if the radio buttons are either, at anytime:


  1. If one or more radio buttons are not actively selected

  2. If one or more radio buttons have 'No' is selected



If all 4 radio buttons have 'Yes' is selected then the 'Submit Form' button should be enabled
disabled=false
.

I'm really trying to understand but I don't think I'm achieving the effect I want.

I must use javascript only (I'll be learning jQuery later on) for this. Any help for me to understand would be appreciated.

Thank you.



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

You could check if the lenght of the no checked is superior from zero or no radio checked, check the working example below.

Hope this helps.

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>