Question

我想设置bootstrap-multiselect插件的复选框样式。基本上我想在所选复选框的标签上添加一个类。我可以通过这种方式获取所选值，但无法弄清楚如何定位复选框。

<label class="checkbox">
   <input type="checkbox" value="red">Red
</label>

$('select').multiselect({
    onChange: function(element, checked) {
        var colors = $('select option:selected');
        $(colors).each(function(){
            $(this).parent().addClass('label-selected');
        });
    }
});

编辑：我找到的唯一方法就是编辑插件：

if (this.options.selectedClass) {
    if (checked) {
        $target.closest('li').addClass(this.options.selectedClass);
        $target.closest('li label').addClass('label-selected'); //ADDED THIS LINE
    }
    else {
        $target.closest('li').removeClass(this.options.selectedClass);
        $target.closest('li label').removeClass('label-selected'); //ADDED THIS LINE
    }
}

Answer 1

我建议使用onChange选项而不是手动编辑插件（在更新到新版本或集成修补程序时可能会遇到麻烦）。现在也可以在文档中找到以下示例：

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selected-parents').multiselect({
            buttonContainer: '<div id="example-selected-parents-container"></div>',
            onChange: function(options, selected) {
                // Get checkbox corresponding to option:
                var value = $(options).val();
                var $input = $('#example-selected-parents-container input[value="' + value + '"]');

                // Adapt label class:
                if (selected) {
                    $input.closest('label').addClass('active');
                }
                else {
                    $input.closest('label').removeClass('active');
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-selected-parents-container label.active {
        font-weight: bold;
    }
</style>
<div class="btn-group">
    <select id="example-selected-parents" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>

如果您还在使用onChange（即将多个选项传递给optgroup）或其他功能，您可能需要调整onChange功能。在这些情况下，还可以查看以下可能需要调整的选项：

onSelectAll
onDeselectAll

bootstrap-multiselect将css添加到所选复选框的父级

1 个答案: