JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input class="ch" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input class="ch" type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input class="ch" type="checkbox" autocomplete="off"> Checkbox 3
  </label>
  <label class="btn btn-primary">
    <input class="ch" type="checkbox" autocomplete="off"> Checkbox 4
  </label>
</div>

JavaScript

$('.ch').change(function() {

    $('.btn-group').find("input[type='checkbox']").not(":checked").attr("checked", true);
  }
});