-1

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
    }
}
4

1 に答える 1

0

プラグインを手動で編集する代わりに、オプションを使用してこれを行うことをお勧めし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>

s (つまり、複数のオプションが に渡される) または追加の機能onChangeも使用している場合は、関数を調整する必要がある場合があります。これらの場合、適応する必要があるかもしれない次のオプションも見てください。optgrouponChange

  • onSelectAll
  • onDeselectAll
于 2016-04-24T12:42:48.983 に答える