jquery selectable - 禁用相应的值

Question

我一直在寻找与我正在尝试实现的类似的东西，但尚未在堆栈或网络上找到它。使用 Jquery 可选择，但有不止一组 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”都将被禁用。所有其他选择选项也是如此，因此基本上您一次只能选择相同的选项之一。我可以使用单选按钮、使用名称和值标签来执行此操作，但不太确定如何在可选界面中实现它？提前感谢您提供任何帮助，或者是否有人可以向我指出类似的应用程序。

Answer 1

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

示例实现可能如下所示(请参阅现场演示 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();

});​