2

実装しようとしているものに似たものを探していましたが、スタック上またはネット上で見つかりませんでした。Jquery Selectableを使用しますが、ulのセットが複数あります。

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

いずれかのオプションから「1」を選択すると、他のすべての「1」が無効になります。他のすべての選択オプションについても同じことが言えます。したがって、基本的に、一度に選択できるのは同じオプションの1つだけです。名前と値のタグを使用してラジオボタンでこれを行うことはできますが、選択可能なインターフェイス内でそれを実装する方法が本当にわかりませんか？助けてくれてありがとう、または誰かが私に同様のアプリケーションを教えてくれたら。

4

1 に答える 1

0

このオプションを使用して、一部のアイテムのみを選択可能にすることができfilterます。変更が行われた後、すべての要素を調べて、必要に応じてフィルターを更新する必要があります。

サンプルの実装は次のようになります（ライブデモはこちらをご覧ください）。

$(document).ready(function() {

    function enableAll() {
        $('li').addClass('enabled');
    }

    function disableSelected(selected) {

        // iterate thru all list items
        $.each($('li'), function(i, item) {

            // if the text is selected somewhere..
            if ($.inArray($(this).text().toLowerCase(), selected) >= 0) {

                // ..and it's not here
                if (!$(this).hasClass('ui-selected')) {

                    // remove
                    $(this).removeClass('enabled');
                }
            }
        });
    }

    $('ul').selectable({

        // only matching items will be selectable
        filter: '.enabled',

        // change handler
        stop: function(event, ui) {

            // we will collect selected texts in this variable
            var selectedTexts = new Array();

            // go thru all selected items (not only in current list)
            $('.ui-selected').each(function() {

                // extract selected text
                var text = $(this).text().toLowerCase();

                // add to array if not already there
                if ($.inArray(text, selectedTexts) < 0) {
                    selectedTexts.push(text);
                }
            });

            // enable all list items for selectable
            enableAll();

            // disable list items with text that is already selected
            disableSelected(selectedTexts);
        }
    });

    // initialization
    enableAll();

});​
于 2012-09-20T19:39:06.147 に答える