Question

我一直在阅读有关Jquery UI可选插件的内容，我的问题是：

我可以限制它只选择列表中最多4个项目吗？或者在不使用可选插件的情况下编写代码会更容易吗？

谢谢！

编辑：感谢您的回答，但我发现我没有很好地解释：用户可以使用Jquery UI可选插件选择（按住ctrl +单击）列表中的多个项目。我想要的是限制它，以便用户最多只能选择4个项目（其中任何一项）。

Answer 1

可以通过处理jQuery UI selectable的选择事件轻松完成。

selectable插件在select操作期间添加ui-selecting个类。当选择操作完成时（即你放开鼠标左键），它会将所有ui-selecting个项目转换为ui-selected。除此之外，内部没有关于要选择的项目的其他内容。

这使我们的工作更轻松，只要项目变为ui-selecting状态，selecting事件就会触发。在那里，我们可以计算.ui-selecting和.ui-selected项的总数，如果它超过了允许的限制，只需从当前项中删除ui-selecting类。

此解决方案适用于所有选择操作，单击，ctrl多选和甚至边界框选择。

$('ul').selectable({
    selecting: function(event,ui){
        // With the current item selected, are we over 4 items (the allowed maximum)?
        if($(this).find('.ui-selecting,.ui-selected').length > 4)
            // If yes, just remove it from the current selection
            $(ui.selecting).removeClass('ui-selecting');
    }
});

演示：http://jsfiddle.net/Vbbfs/

Answer 2

JSFIDDLE DEMO

看看演示！
以下是如何实现它：

$('ul.list li').click(function() {
    $(this).toggleClass('selected');

    if ($('.selected').length > 4) {
        $(this).toggleClass('selected');
        alert('You have already selected 4 items!\nYou can undo a selection.');
    }
});

P.S。

这样做可以切换已经选中的内容元素来选择一个新的！
的代码中的\n就是这样对于警报框内的新行;） ;）

Answer 3

您正在寻找:lt() Selector。

$('ul li:lt(4)')会在列表中选择4个第一个<li>项。

示例：http://jsfiddle.net/vjbzr/

Answer 4

这应该使用:lt(index)方法完成。

例如$('li:lt(4)')将选择索引小于4的所有列表元素。因为索引是基于零的，所以将选择前4个元素。

用jquery选择4项

4 个答案:

JSFIDDLE DEMO