在引导样式按钮组上切换检查时如何更改复选框标签文本

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>

Java脚本：

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

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

注意 - 我不确定您使用更改或单击事件是否重要，我只是以绿色按钮为例。

原文由 Mr Shoubs 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

全样本

原文由 Steven Web 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

经过大量调查但没有找到任何有用的东西，我关闭了引导程序样式，发现更改文本后复选框元素消失了——我想更改标签文本会替换复选框元素（不确定这是否是一个错误或设计使然，但有点乱）。但我通过显式添加复选框元素解决了这个问题：( 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>

Java脚本：

 $('#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");
    }
});

注意 - 如果我显式地在元素上设置 checked 似乎并不重要（ JSFiddle ）：

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

我不确定为什么，但假设 bootstrap 在这里做了一些事情，就像你关闭 bootstap 一样，它变得不可靠（并且只有当你点击标签而不是复选框时才有效，因为事件的连接方式）。

原文由 Mr Shoubs 发布，翻译遵循 CC BY-SA 3.0 许可协议