How to make bootstrap checkbox groups turn off all checkboxes in another group when they become checked

Question

I have 2 checkbox groups. I want to allow multiple selections from either group. But there should never be checkboxes from both groups selected at the same time. I am using bootstrap for the checkboxes so that they appear as a toggle button.

Here are the checkbox groups

<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary" style="margin: 3px;">
    <input class="add-checkbox assignment-grid-button" data-srcorderid="1" type="checkbox">Add
  </label>
</div>

<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary" style="margin: 3px;">
    <input class="add-checkbox assignment-grid-button" data-srcorderid="2" type="checkbox">Add
  </label>
</div>

<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
    <input class="reassign-checkbox assignment-grid-button" data-srcorderid="4" type="checkbox">Reassign
  </label>
</div>

<div class="btn-group-sm btn-group-toggle assign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary" style="margin: 3px;">
    <input class="add-checkbox assignment-grid-button" data-srcorderid="3" type="checkbox">Add
  </label>
</div>

<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
    <input class="reassign-checkbox assignment-grid-button" data-srcorderid="5" type="checkbox">Reassign
  </label>
</div>

<div class="btn-group-sm btn-group-toggle reassign-radio-group-div" data-toggle="buttons">
  <label class="btn btn-secondary reassign-radio-group-label" style="margin: 3px;">
    <input class="reassign-checkbox assignment-grid-button" data-srcorderid="6" type="checkbox">Reassign
  </label>
</div>

<div style="padding-top:30px;">
<div style="float:left;">
  <span class="assign-header">Assignment</span>
</div>
<input style="float:left;width:100px" id="bulk-attuid-assignment-input" class="form-control" name="field" type="text">
<button id="bulk-attuid-assignment-button" type="button" class="btn btn-primary bulk-attuid-assignment-class" style="float:left;margin-left: 10px;margin-bottom:4px;">Assign</button>

</div>

and here is my attempt to allow for only one group to be selected at a time

$(document).ready(function() {
  $(document).off('change', '.reassign-checkbox').on('change', '.reassign-checkbox', function(e) {
    if ($(this).parent().hasClass('active') == true) {
      $('.add-checkbox').parent().removeClass('active');
      toggleAssign('show');
    }
    //if unchecked
    if ($(this).hasClass('reassign-checkbox') == true && $(this).parent().hasClass('active') == false) { //if the current changed value is reassign, and the change is an unselect
      if ($('.btn-group-toggle.reassign-radio-group-div >.active').length == 0 && $('.btn-group-toggle.assign-radio-group-div >.active').length == 0) { //and it is the last reassign that is unchecked
        //hide the assignment field
        toggleAssign('hide');
        $('#bulk-attuid-assignment-input').val('');
      }
    }
  });
  $(document).off('change', '.add-checkbox').on('change', '.add-checkbox', function(e) {
    if ($(this).parent().hasClass('active') == true) {
      $('.reassign-checkbox').parent().removeClass('active');
      toggleAssign('show');
    }
    //if unchecked
    if ($(this).hasClass('add-checkbox') == true && $(this).parent().hasClass('active') == false) { //if the current changed value is add, and the change is an unselect
      if ($('.btn-group-toggle.assign-radio-group-div >.active').length == 0 && $('.btn-group-toggle.reassign-radio-group-div >.active').length == 0) { //and it is the last add button that is unchecked
        //hide the assignment field
        toggleAssign('hide');
        $('#bulk-attuid-assignment-input').val('');
      }
    }
  });
});

here is a JSFiddle

From immediate appearances the code seems to be working. When you have multiple "Add" toggles turned on, then select a "Reassign", the "Add" toggles turn off. However, sometimes it only grabs focus instead of having an impact.

Any help would be so much appreciated

Answer 1

The issue was, you have to write two lines for selecting a checkbox

changed this line

$('.add-checkbox').parent().removeClass('active');

and this line

$('.reassign-checkbox').parent().removeClass('active');

to this (added the additional line)...

$('.add-checkbox').parent().removeClass('active');
$('.add-checkbox').prop("checked", false);

$('.reassign-checkbox').parent().removeClass('active');
$('.reassign-checkbox').prop("checked", false);

You must have both lines for making a bootstrap inactive per the bootstrap instructions

From the bootstrap website: https://getbootstrap.com/docs/3.3/javascript/