JSFiddle - React, Tailwind, and code Playground

by egorbatik

HTML

<form>
  Generic Privacy Policy
  [*]static global opt1 <br/>
    <input type="radio" name="ppopt1" value="0" data-req="1"> No <br/>
  <input type="radio" name="ppopt1" value="1" data-req="1"> Yes   <br/>
  [*]static global opt2 <br/>
  <input type="radio" name="ppopt2" value="0" data-req="1"> No  <br/>
  <input type="radio" name="ppopt2" value="1" data-req="1"> Yes <br/>
  static global opt3 <br/>
  <input type="radio" name="ppopt3" value="0" data-req="0"> No <br/>
  <input type="radio" name="ppopt3" value="1" data-req="0"> Yes <br/>
  static global opt4 <br/>
  <input type="radio" name="ppopt4" value="0" data-req="0"> No <br/>
  <input type="radio" name="ppopt4" value="1" data-req="0"> Yes <br/>
  <button name="btn" type="button" disabled>Send!</button>
</form>

JavaScript

$('input[type="radio"]').change(function ()
{
   var req,reqYes;
   req=$('input[type="radio"][data-req="1"][value="1"]').length;
   reqYes=$('input:checked[type="radio"][data-req="1"][value="1"]').length;
   document.getElementsByName("btn")[0].disabled= (req!=reqYes);
   return true;
 }
);

/* - Is onchange because it happens after the click once the radiobutton state has been changed 
   - Is getElementsByName()[0] because you used the name instead the ID (The id is unique, but not the name so it returns an array of objects)
   - No need to do a foreach since you can check the Radiosbutton required and the Required with yes answer, the foreach is done by Jquery
**/