Code to set/unset checkbox buttons in Bootstrap 3.0

Question

I've been trying to use a button group (as per the instructions at at http://getbootstrap.com/javascript/#buttons) and then to parse their values into a shifted array:

Code for the btn-group

<div class="btn-group" id="weekdays" data-toggle="buttons">
    <label class="btn btn-default">
      <input type="checkbox" >Mo
    </label>
    <label class="btn btn-default">
      <input type="checkbox">Tu
    </label>
    <label class="btn btn-default">
      <input type="checkbox">We
    </label>
  </div>
</div>

Code for reading the values

$("#weekdays ").change(function(event){

   var checkedDays = $("#weekdays :checkbox").map(function(){
        return $(this).is(':checked') ? 1 : 0;
    }).get(); // <----

    var sun = checkedDays.pop();

    checkedDays.unshift(sun);

    console.log(checkedDays);
});

So far so good. (Even if I'm sure the code could be better written.)

However, my problem comes when I try to set the values of the checkboxes programatically, and get it reflected in the UI. I've sort of managed to change the values of the checkboxes using a number of methods $(this).prop('checked', true), etc, which seems to update the backing values, but it does nothing to change the appearance of the buttons.

I've seen a number of solutions, but none that works with the Bootstrap 3.0 recommended way of setting up the checkbox btn-group. Does anyone have a solution?

Blazemonger · Accepted Answer · 2017-02-10 21:33:17Z

11

If you use a DOM editor when clicking on the Bootstrap buttons, you'll see that a class active is added to the label (not the checkbox input) when the button is clicked.

To programmatically toggle the buttons, use the Bootstrap .button('toggle') method on the label:

$('#weekdays label').eq(n).button('toggle');

http://jsfiddle.net/mblase75/4NVvj/

This will change both the appearance of the button and the checked property of the checkbox within.

edited Feb 10, 2017 at 21:33

answered Sep 25, 2013 at 13:28

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

0x_Anakin · Accepted Answer · 2013-09-25 13:16:41Z

6

In a similar case what worked for me was this:

$('#checkBoxId').trigger("click");

Which does exactly what you want.

PS. Not sure if it is the best but it worked for me back then.

answered Sep 25, 2013 at 13:16

0x_Anakin

3,2695 gold badges52 silver badges90 bronze badges

1 Comment

uvesten Over a year ago

I cannot seem to get this to work, but thanks for your answer!

Collectives™ on Stack Overflow

Code to set/unset checkbox buttons in Bootstrap 3.0

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related