CODEWITHSUNDEEP
jquery-uijquery-ui-selectable
omega
omega

Reputation: 43833

jQuery UI - Selectable Widget - How to disable multi select?

In jquery ui selectable widget, I noticed that you can select more than one item by holding ctrl (or by dragging a box), but how do you disable multi selecting. I only want to be able to select 1 at a time.

Thanks.

Upvotes: 4

Views: 3326

Answers (3)

Lucio M. Tato
Lucio M. Tato

Reputation: 5805

selectable, single-select, with keyboard 

//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...

Upvotes: 0

user1792423
user1792423

Reputation: 

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

Upvotes: 0

Royce Feng
Royce Feng

Reputation: 1663

This is a fairly crude implementation: http://jsfiddle.net/rtRjK/

Basically, when an element is selected, first unselect the all its siblings that have been selected - this handles ctrl-clicks. Next, iterate over the siblings that are selecting and unselect them - this handles drags. As a consequence, dragging always takes the element with largest y-coordinate.

You can also roll your own selectable widget. I removed the ctrl key reference and _mouseDrag function from $.ui.selectable: http://jsfiddle.net/zFFXc/

Upvotes: 7

Related Questions