Bootstrap Tabs with Checkboxes

by rjurd

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="h3 py-3">
  Select a Service
</div>
<ul class="nav nav-tabs" id="myTab">
  <li class="nav-item ">
    <label class='nav-link'>
      <input style="display: inline-block;" type="checkbox" value="home" />
      <button class="tab" data-toggle='tab' data-target='#home' style="display: inline-block;" disabled>Home</button>
    </label>
  </li>
  <li class="nav-item">
      <label class="nav-link">
        <input style="display: inline-block;" type="checkbox" value="profiles" />
        <button class="tab" data-target='#profiles' style="display: inline-block;" disabled>Profiles</button>
      </label>
  </li>
  <li class="nav-item">
      <label class="nav-link">
        <input style="display: inline-block;" type="checkbox" id="product" value="messages" />
        <button class="tab" data-target='#messages' style="display: inline-block;" disabled>Messages</button>
      </label>
  </li>
</ul>

<div id='content' class="tab-content">
  <div class="tab-pane" id="home">
    <ul>
      <li>home</li>
      <li>home</li>
      <li>home</li>
    </ul>
  </div>
  <div class="tab-pane" id="profiles">
    <ul>
      <li>profile</li>
      <li>profile</li>
      <li>profile</li>
    </ul>
  </div>
  <div class="tab-pane" id="messages">
    <ul>
      <li>message</li>
      <li>message</li>
      <li>messags</li>
    </ul>
  </div>
  <div class="tab-pane" id="settings"></div>
</div>

CSS

.tab {
  background-color: inherit;
  border: 0;
}
.tab.active {
  font-weight: bold;
}
body {
  padding: 15px;
}
.nav-link {
    color: #495057!important;
    background-color: #fff!important;
    border-color: #dee2e6 #dee2e6 #fff!important;
}

JavaScript

$('#myTab li input').click(function(e) {
  // e.preventDefault();
  $(this).siblings('button').prop('disabled', !$(this).prop('checked')).click();
  if (!$(this).prop('checked')) {
    let t = $(this).siblings('button').data('target');
    $(t).removeClass('active');
  }
});

$('.tab').on('click', function(e) {
  e.preventDefault();
  $(this).closest('div').addClass('active');
  $('.tab').removeClass('active');
  $(this).tab('show');
})