Shift 单击引导程序/FlatUI 复选框

Question

当用户将点击从一个复选框切换到另一个复选框以选择多个复选框时，我有这个简洁的脚本来处理。

var last_clicked = null;
$("table.multi-select").on("click", "input:checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table"); 

    if (!last_clicked)
        last_clicked = this; 

    if (event.shiftKey) {
        var start = grid.find("tbody input:checkbox").index(this);
        var end = grid.find("tbody input:checkbox").index(last_clicked);
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            grid.find("tbody input:checkbox")[i].checked = last_clicked.checked;
        }
    }

    last_clicked = this;
});

效果很好。我现在用样式引导/FlatUI 替换我的复选框。这些隐藏了实际的复选框并将其替换为样式标签。我已经相应地修改了我的班次点击脚本

$("table.multi-select").on("click", "label.checkbox", function (e) {
    // allow shift clicking
    var grid = $(this).parents("table");

    if (!last_clicked)
        last_clicked = this;

    if (event.shiftKey) {
        var start = grid.find("tbody label.checkbox").index(this);
        var end = grid.find("tbody label.checkbox").index(last_clicked);
        // find checked state of last clicked 
        var checked_last = $(last_clicked).hasClass("checked"); 
        for (i = Math.min(start, end) ; i <= Math.max(start, end) ; i++) {
            // don't check 'this', because flatUI will toggle it when we're done
            if(i != start) 
                $(grid.find("tbody label.checkbox input:checkbox")[i]).checkbox(checked_last ? "check" : "uncheck");
        }            
    }

    last_clicked = this;
});

这也有效。问题是，它还选择了复选框之间页面上的所有文本！我该如何阻止这种情况发生？

Answer 1

在您处理 shift 键的逻辑中，您可以随后使用此问题的答案取消选择文本：

Clear a selection in Firefox