如何在切换bootstrap样式按钮组时检查复选框标签文本

Question

我正在尝试更改引导样式按钮组复选框的标签文本,但一旦更改,就无法再次更改文本.(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");
    }
});

注意 - 如果您使用更改或单击事件并且我只是以绿色按钮为例,我不确定是否重要.

Answer 1

这是我的问题解决方案:

我添加了文本内容的范围,如:

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

然后我把你的jquery改为:

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

这提供了一种动态的方式来改变文本,你不必关心ID

完整样本