How to change checkbox label text when toggling check on bootstrap styled button group

Question

I'm trying to change the label text for a bootstrap styled button group checkbox, but once changed, it isn't possible to change the text again. (JSFiddle)

HTML:

<div class="btn-group form-group pull-right" data-toggle="buttons">
    <label id="lblfilter-green" for="filter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green"/>
        On
    </label>
</div>

Javascript:

$('#lblfilter-green').on('click', function (e) {
    var value = $('#filter-green').is(':checked');                

    if (value) {    
        $('#lblfilter-green').text("Off");
    } else {
        $('#lblfilter-green').text("On");
    }
});

Note - I'm unsure if it matters if you use change or click event and that I'm only doing the green button as an example.

Answer 1

Here is my solution for your problem:

I added a span for the text content like:

    <label id="lblfilter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green" /><span>Off</span>
    </label>

Then i altert you jquery to:

    $('label').click(function () {
        var checked = $('input', this).is(':checked');
        $('span', this).text(checked ? 'Off' : 'On');
    });

This provides a dynamic way to change the text and you dont have to care about ID's

Full Sample

Answer 2

After much investigation and not coming up with anything useful, I turned off the bootstrap styling and found that the check box element disappeared after you changed the text - I guess changing the label text replaces the check box element (not sure if this is a bug or by design, but its a little messy). But I solved it by adding the check box element back in explicitly: (JSFiddle)

HTML:

<div class="btn-group form-group pull-right" data-toggle="buttons">
    <label id="lblfilter-green" for="filter-green" class="btn btn-success">
        <input type="checkbox" id="filter-green">
        On
    </label>
</div>

Javascript:

$('#lblfilter-green').on('click', function (e) {
    var value = $('#filter-green').is(':checked');                

    if (value) {                    
        $('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> Off");
    } else {
        $('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> On");
    }
});

Note - it doesn't seem to matter if I set checked on the element explicitly (JSFiddle):

$('#lblfilter-green').html("<input type='checkbox' id='filter-green' 'checked' /> On");

I'm unsure why, but assume bootstrap is doing something here as if you turn bootstap off, it becomes unreliable (and only works if you click the label not the check box due to the way the event is hooked up).