2

Bootstrap Multiselectを使用して、選択した年の最大数が 4 になる年のリストを表示しています。4 年が選択されている場合は、選択されていないすべての年を無効にします。カウントを 3 にするために年が選択されていない場合は、すべての年を再度有効にします。

(そのプラグインのプロジェクトの最新のコミットは、有効化/無効化機能を追加することでしたが、それは個々の選択要素用ではないと思います - https://github.com/davidstutz/bootstrap-multiselect/issues/171 )

私のHTML：

<select id="slYears" class="multiselect" multiple="multiple">
    <option value="1" disabled="disabled">2009</option>
    <option value="2" selected="selected">2010</option>
    <option value="3" selected="selected">2011</option>
    <option value="4" selected="selected">2012</option>
    <option value="5" selected="selected">2013</option>
</select>

私のJavaScript（最初の試み）：

$('#slYears').change(function () {
    var arr = $(this).val().toString().split(',');
    if (arr.length >= 4) {
        $('#slYears option').each(function () {
            if (!$(this).is(':selected')) {
                $(this).prop('disabled', true);
            }
        });
    }
    else {
        $('#slYears option').each(function () {
            $(this).prop('disabled', false);
        });
    }
});

次に、プラグインのメソッドと例をいくつか使用してみました。「すべて選択」の例を使用してすべてを有効にしてみました。「onchange」イベントを使用してみましたが、どれも機能しません。

jsfiddle は次のとおりです: http://jsfiddle.net/389Af/1/ (上記の JS の前にプラグイン JS を貼り付けたことに注意してください)

4

2 に答える 2

3

デビッドの答えは私を大いに助けてくれました。ありがとうございます。

私は彼のコードをより一般的/あらゆる複数選択に適用できるように変更しました。

select-element データ値「max」が設定されている必要があります。 <select ... data-max="5"/>

onChange: function (element) {
    var me = $(element), // is an <option/>
        parent = me.parent(),// is a <select/>
        max = parent.data('max'), // defined on <select/>
        options, // will contain all <option/> within <select/>
        selected, // will contain all <option(::selected)/> within <select/>
        multiselect; // will contain the generated ".multiselect-container"

    if (!max) { // don't have a max setting so ignore the rest
        return;
    }

    // get all options
    options = me.parent().find('option');

    // get selected options
    selected = options.filter(function () {
        return $(this).is(':selected');
    });

    // get the generated multiselect container
    multiselect = parent.siblings('.btn-group').find('.multiselect-container');

    // check if max amount of selected options has been met
    if (selected.length === max) {
        // max is met so disable all other checkboxes.

        options.filter(function () {
            return !$(this).is(':selected');
        }).each(function () {
            multiselect.find('input[value="' + $(this).val() + '"]')
                .prop('disabled', true)
                .parents('li').addClass('disabled');
        });

    } else {
        // max is not yet met so enable all disabled checkboxes.

        options.each(function () {
            multiselect.find('input[value="' + $(this).val() + '"]')
                .prop('disabled', false)
                .parents('li').removeClass('disabled');
        });
    }
}

コンポーネント仕様の一部として「最大許容」オプションのようなものがあると便利です.. ;-)

于 2013-12-14T01:20:03.007 に答える