jQuery UI - 可选择小部件 - 如何禁用多选？

Question

在jquery ui可选择的小部件中，我注意到你可以通过按住ctrl键（或拖动框）选择多个项目，但是如何禁用多选。我只想一次只能选择一个。

谢谢。

- omega

Answer 1

这是一个相当粗糙的实现：http://jsfiddle.net/rtRjK/ 基本上，当选定一个元素时，首先取消所有已选中的同级元素 - 这处理ctrl-click。接下来，迭代选中的兄弟元素并取消选中它们 - 这处理拖动。因此，拖动始终带有最大y坐标的元素。

您也可以制作自己的可选小部件。我从$.ui.selectable中删除了ctrl键引用和_mouseDrag函数：http://jsfiddle.net/zFFXc/

- Royce Feng

---

单选插件更加简洁。我基于“你也可以…”部分点赞了这个答案，因为其他答案都很繁琐，没有干净和专业的用户界面。干杯！ - Jim Speaker

Answer 2

$("#myList li").click(function() {
  $(this).addClass("selected").siblings().removeClass("selected");
});

- user1792423

Answer 3

可选择的、单选的，支持键盘操作

//after load
$(function() {

    // make <ol id=lista> selectable (jquery UI)
    $("#lista").selectable();
    $("#lista").children(":first-child").addClass("selected"); //select first

    $(document).keydown(function(ev) { //con keyboard

        var actual = $(".selected");
        switch (ev.keyCode) {

            case 13: // User pressed "enter" key
                actual.dblclick();
                ev.preventDefault();
                break;

            case 38: // User pressed "up" arrow
                actual.prev().click();
                ev.preventDefault();
                break;

            case 40: // User pressed "down" arrow
                actual.next().click();
                ev.preventDefault();
                break;
        }
    }); //end keydown

    //single select
    $("#lista li").click(function() {
        $(this).addClass("selected").siblings().removeClass("selected");
    });

}); // end $(fn...

- Lucio M. Tato