title: HTML checkbox select one at a time per group
body: <p>I've been trying some code to be able to check 1 checkbox at a time, but I also want to be able to check 1 box at a time in another group at the same time ( they work together )</p>
  
  <p>This is the code I've tried so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <p>Checkbox group1</p>
  
  <pre><code>                &lt;div class="modal-body"&gt;
                  Status to change:
                  &lt;br&gt;&lt;br&gt;
                  &lt;label for=".checkboxSanction"&gt;Sanction Status
                      &lt;input type="checkbox" name="statusbox" value="Sanction Status" class="checkboxSanction"&gt;
                  &lt;/label&gt;&lt;br&gt;
                  &lt;label for=".checkboxPep"&gt;Pep Status
                      &lt;input type="checkbox" name="statusbox" value="PEP Status" class="checkboxPep"&gt;
                  &lt;/label&gt;&lt;br&gt;
                  &lt;label for=".checkboxUnderage"&gt;Underage Status
                      &lt;input type="checkbox" name="statusbox" value="Underage Status" class="checkboxUnderage"&gt;
                  &lt;/label&gt;&lt;br&gt;&lt;br&gt;
                  Change status to:
  </code></pre>
  
  <p>Checkbox group2</p>
  
  <pre><code>                &lt;label for=".checkboxInvestigating"&gt;Investigating
                      &lt;input type="checkbox" name="valuebox" value="2" class="checkboxInvestigating"&gt;
                  &lt;/label&gt;&lt;/br&gt;
                  &lt;label for=".checkboxClosed"&gt;Closed
                      &lt;input type="checkbox" name="valuebox" value="10" class="checkboxClosed"&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>    $("input:checkbox").on('click', function () {
      var $box = $(this);
      if ($box.is(":checked")) {
          var group = "input:checkbox[name='" + $box.attr("name") + "']";
          $(group).prop("checked", false);
          $box.prop("checked", true);
      } else {
          $box.prop("checked", false);
      }
  });
  </code></pre>
  
  <p>The problem here is that I can only check 1 box at a time, and that goes for all of the checkboxes ( as in both groups ) - <em>I want to be able to check 1 per group.</em></p>
  
  <p>Does anyone have an idea of how do solve this issue? Thanks for helping!</p>