How to link bootstrap buttons with input checkbox?

Question

I would like to find a way on how to link bootstrap button classes in the following manner?

 <!-- HTML -->
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-groceries"></i>
                    <span>Grocery</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="btn btn-primary">
                <input type="checkbox">
                    <i class="flaticon-cooking"></i>
                    <span>Cooking</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6">
            <label class="">
                <input type="checkbox">
                    <i class="flaticon-house-cleaning"></i>
                    <span>Cleaning</span>
                    <a>select</a>
            </label>
        </div>
        <div class="col-md-6 col-sm-6>
            <label class="">
                <input type="checkbox" ng-model="mySelfHandyman" >
                    <i class="flaticon-handyman-1"></i>
                    <span>Handyman</span>
                    <a>select</a>
            </label>
        </div>


 <!-- jquery -->
$('input[type="checkbox"]).on('change',function(){
$('input[type="checkbox"]').not(this).prop('checked', false);
});

using input as radio type is not an option. they have to be checkbox. Results that are desired is that when checkbox = true, button (label in this case) should be active and when we select a different checkbox previous button should got to its default state and the current one should be active. Situation also call for only 1 checkbox to be selected at one time. jquery is in place to solve that problem, but I am unable to toggle the buttons between default and active states on checkbox clicks. Currently I have to click on the buttons twice to remove the active class. First click makes the checkbox = true and button class=active, if i click on second checkbox, it makes previous checkbox = false and (this) = true, but it also makes the current button class=active without changing the previous button's class to default. I would really appreciate any help in this matter. Thanks

zer00ne zer00ne · Accepted Answer · 2016-12-08T22:51:10

The way to handle an exclusive state is to make all of the objects one state (ex. off)and then go back and change the state of the active one to it's unique state (ex. on). So use jQuery selector :checkbox to make your life easier and this to filter in the checkbox/button that was actually clicked.

Also, I changed the HTML somewhat. It's following the pattern when Bootstrap is properly done.

.container~~~▼

~~~~~~~~~~~.row~~~▼

~~~~~~~~~~~~~~.col-md-6~~~~~~~.col-md-6

The children of a row must add up to x=12, (ex. .col-lg-4, .col-lg-4, .col-lg-4)

SNIPPET

$(':checkbox').on('change', function() {
  $(':checkbox').prop('checked', false);
  $(this).prop('checked', true);
});

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flat-ui/2.3.0/css/flat-ui.min.css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class='container'>
  <section class='row'>
    <div class="col-md-12 col-sm-12">
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-groceries"></i>
        <span>Grocery</span>
        <a>select</a>
      </label>
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-cooking"></i>
        <span>Cooking</span>
        <a>select</a>
      </label>
    </div>
  </section>
  <section class='row'>
    <div class="col-md-12 col-sm-12">
      <label class="btn btn-primary">
        <input type="checkbox">
        <i class="flaticon-house-cleaning"></i>
        <span>Cleaning</span>
        <a>select</a>
      </label>
      <label class="btn btn-primary">
        <input type="checkbox" ng-model="mySelfHandyman">
        <i class="flaticon-handyman-1"></i>
        <span>Handyman</span>
        <a>select</a>
      </label>
    </div>
  </section>
</main>

How to link bootstrap buttons with input checkbox?

1 Answers

SNIPPET