JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

HTML

<form>
    <input type="checkbox" name="q" id="a-0" required autofocus checked="checked">
    <label for="a-0">a-1</label>
    <br>

    <input type="checkbox" name="q" id="a-1" required>
    <label for="a-1">a-2</label>
    <br>

    <input type="checkbox" name="q" id="a-2" required>
    <label for="a-2">a-3</label>
    <br>

    <input type="submit">
</form>

JavaScript

$(function(){
var allRequiredCheckboxes = $(':checkbox[required]');
var checkboxNames = [];

for (var i = 0; i < allRequiredCheckboxes.length; ++i){
var name = allRequiredCheckboxes[i].name;
checkboxNames.push(name);
}

checkboxNames = checkboxNames.reduce(function(p, c) {
if (p.indexOf(c) < 0) p.push(c);
return p;
}, []);

for (var i in checkboxNames){
!function(){
  var name = checkboxNames[i];
  var checkboxes = $('input[name="' + name + '"]');
  checkboxes.change(function(){
    if(checkboxes.is(':checked')) {
      checkboxes.removeAttr('required');
    } else {
      checkboxes.attr('required', 'required');
    }
  });
}();
}

//This is the code that removes the required attribute of the check boxes which are already checked on load
for (var i in checkboxNames){
!function(){
  var name = checkboxNames[i];
  var checkboxes = $('input[name="' + name + '"]');

    if(checkboxes.is(':checked')) {
      checkboxes.removeAttr('required');
    } else {
      checkboxes.attr('required', 'required');
    }
}();
}

});