At least one checkbox from a group needs to be checked if another checkbox is checked

Previously I needed at least one checkbox to be checked before form was validated and submitted.

Now: I have three independent groups of checkboxes:

• a) Two checkboxes, at least one needs to be checked (that's what was previously)
• b) One checkbox - doesn't have to be checked,
• c) Three checkboxes - if checkbox b) is checked, at least one from this group has to be checked

Each checkbox group is put inside it's own table row, so I was thinking about targeting them by that, but I cannot get it to work.

This is what worked previously, when only group a) was present in a form - I was targeting all required checkboxes and removing this attribute if any of them was checked:

$(function() {
  var requiredCheckboxes = $(':checkbox[required]');
  requiredCheckboxes.change(function() {
    console.log('requiredCheckboxes.length: ' + requiredCheckboxes.length);
    if (requiredCheckboxes.is(':checked')) {
      requiredCheckboxes.removeAttr('required');
    } else {
      requiredCheckboxes.attr('required', 'required');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="add-form" class="dialog">
  <form method="post" action="/app/save" onsubmit="return postForm(this)">
    <table>
      <tr id="checkboxA">
        <td>COUNTRIES: </td>
        <td>
          country1: <input type="checkbox" />
          country2: <input type="checkbox" />
          country3: <input type="checkbox" />
        </td>
      </tr>
      <tr id="checkboxB">
        <td>PUBLIC: </td>
        <td>
          <input type="checkbox" />
        </td>
      </tr>
      <tr id="checkboxC">
        <td>PEOPLE: </td>
        <td>
          person1: <input type="checkbox" />
          person2: <input type="checkbox" />
          person3: <input type="checkbox" />
        </td>
      </tr>
    </table>
  </form>
</div>