jquery selectable -禁用相应的值

Question

我一直在寻找与我试图实现的东西类似的东西，但在堆栈或网络上都没有找到。使用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‘都将被禁用。所有其他选择选项也是如此，所以基本上一次只能选择一个相同的选项。我可以使用单选按钮，使用name和value标签，但不确定如何在可选界面中实现它?谢谢您的帮助，或者是否有人可以将我指向类似的应用程序。

Answer 1

可以使用filter选项仅使某些项目可选。进行更改后，您需要遍历所有元素，并根据需要更新过滤器。

示例实现可能如下所示(请参阅现场演示here)：

$(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();

});​