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

【问题标题】：jQuery UI - Selectable Widget - How to disable multi select?jQuery UI - 可选小部件 - 如何禁用多选？
【发布时间】：2012-10-26 16:38:57
【问题描述】：

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

谢谢。

【问题讨论】：

标签： jquery-ui jquery-ui-selectable

【解决方案1】：

这是一个相当粗略的实现：http://jsfiddle.net/rtRjK/

基本上，当一个元素被选中时，首先取消选中它所有被选中的兄弟元素——这会处理 ctrl-clicks。接下来，遍历正在选择和取消选择它们的兄弟姐妹 - 这处理拖动。因此，拖动总是采用 y 坐标最大的元素。

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

【讨论】：

单选插件非常干净。根据“你也可以......”部分对这个答案进行了投票，因为我读过的所有其他答案都是 hacky 而不是干净和专业的 UI。干杯

【解决方案2】：

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

【讨论】：

【解决方案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...

【讨论】：