Bootstrap btn-group checkbox toggling

I'm using btn-group to display some checkboxes in button style. The checkbox will keep its value after refresh, but the button will be reset to inactive state. That leads to asynchronous between "visual value" and "real value" of the checkbox.

<div class="btn-group filter-checkbox" data-toggle="buttons">
    <label class="btn btn-primary">
        <%= f.check_box(:with_bedroom_num_check, {multiple: true}, '1', nil) %>1
    </label>
    <label class="btn btn-primary">
        <%= f.check_box(:with_bedroom_num_check, {multiple: true}, '2', nil) %>2
    </label>
    <label class="btn btn-primary">
        <%= f.check_box(:with_bedroom_num_check, {multiple: true}, '3', nil) %>3
    </label>
    <label class="btn btn-primary">
        <%= f.check_box(:with_bedroom_num_check, {multiple: true}, '4', nil) %>4 or more
    </label>
</div>

How can I toggle these buttons according to the value of checkboxes when the page is load?