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”都被禁用。所有其他选择选项也是如此，因此基本上您一次只能选择一个相同的选项。我可以使用单选按钮，使用名称和值标签来做到这一点，但不确定如何在可选界面中实现它？提前感谢您的帮助，或者如果有人可以将我指向类似的应用程序。

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 回答