Question

我正在使用Bootstrap 3.1.x，我希望有一个可切换的状态单选按钮组，根据所选的活动项目更改其无线电标签的颜色。

我有两个单选按钮：已发布和草稿。

我需要在选择已发布的时交换.btn-success类，而在选择<{1}}时则交换{/ 1}}。

我还需要在选择草稿时交换.btn-default课程，而在{em>选择时不需要交换.btn-danger。

标记（默认为草稿状态）：

.btn-default

我在<div class="btn-group" data-toggle="buttons" data-toggle-default-class="btn-default"> <label class="btn btn-xs btn-default" data-toggle-class="btn-success"> <input type="radio" name="status" value="1" id="status-published" /> Published </label> <label class="btn btn-xs btn-danger active" data-toggle-class="btn-danger"> <input type="radio" name="status" value="0" id="status-draft" checked /> Draft </label> </div>上使用data-toggle-default-class属性来告诉默认按钮类颜色。此外，我在标签上使用.btn-group属性来判断选择时应使用哪种按钮类颜色。

的JavaScript ：

data-toggle-class

它有效，但只有当您交换选择时。如果你在一个选项上点击两次，它就会完全行为不端。

以下是查看问题的小提琴：http://jsfiddle.net/Hq78X/1/

我正在寻找一个解决方案，我也愿意接受一个不引人注目的方法来实现这个目标。提前谢谢！

Answer 1

希望它对某人有所帮助，我让它有点改变JS：

$('.btn-group[data-toggle=buttons]').each(function (i, e) {
    var default_class = $(e).data('toggle-default-class') || 'btn-default';

    $(e).find('label')
        .click(function (event) {
            $(e).find('label')
                .each(function (i, e) {
                    if (!(e == event.target)) {
                        $(e).removeClass($(e).data('toggle-class'))
                            .addClass(default_class);
                        $(e).find('input')
                            .removeAttr('checked');
                    } else {
                        $(e).removeClass(default_class)
                            .addClass($(e).data('toggle-class'));
                        $(e).find('input')
                            .attr('checked', 1);
                    }
                });
        });
});

更新了小提琴： http://jsfiddle.net/Hq78X/2/

无论如何，谢谢你们。：）

动态可切换Bootstrap的单选按钮组

1 个答案: