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”。所有其他选择选项也是如此，因此基本上您一次只能选择一个相同的选项。我可以使用单选按钮，使用名称和值标签，但不确定如何在可选择的界面中实现它？如果有人可以帮我指点类似的申请，请提前致谢。

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

});

jquery selectable - 禁用相应的值

1 个答案: