JSFiddle - React, Tailwind, and code Playground

by runjep

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<input type="radio" name="gender" value="male"> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
<br>
<br>
<hr>
<input type="radio" name="gender2" value="male"> Male2
<br>
<input type="radio" name="gender2" value="female"> Female2
<br>
<input type="radio" name="gender2" value="other"> Other2
<br>
<br>
<input type="radio" name="gender3" value="male"> Male2
<br>
<input type="radio" name="gender3" value="female"> Female2
<br>
<input type="radio" name="gender3" value="other"> Other2
<br>
<br>
<hr>
<p id="validationRow">A value must be selected in every row</p>
<p id="validationThesis">Thesis must be specified</p>

JavaScript

var rb = $(":radio");
var formOk = false;
var rbNames = [];
$.each(rb, function(i, r) {
  if (rbNames.indexOf(r.name) === -1)
    rbNames.push(r.name);
});
var noOfRows = rbNames.length;
rb.change(function(event) {
  if (event.target.value === 'male') {
    var checkedRadioButtons = $(":checked");
    var rbName = event.target.name;
    $.each(checkedRadioButtons, function(i, v) {
      if (v.value === 'male' && v.name !== rbName)
        v.checked = false;
    });
  }
  var checkedRadioButtons = $(":checked");
  var radioSelectedRadioButtonNames = [];
  var thesisIsSelected = false;
  $.each(checkedRadioButtons, function(i, v) {
    if (v.value === 'male')
      thesisIsSelected = true;
    if (radioSelectedRadioButtonNames.indexOf(v.name) === -1)
      radioSelectedRadioButtonNames.push(v.name);
  });
  if (thesisIsSelected)
    $('#validationThesis').hide();
  else
    $('#validationThesis').show();
  if (radioSelectedRadioButtonNames.length === noOfRows)
    $('#validationRow').hide();
  else
    $('#validationRow').show();
  formOk = (radioSelectedRadioButtonNames.length === noOfRows && thesisIsSelected)
});