jQuery multiple selectable listitem group

Question

Я пытаюсь создать несколько наборов выбираемых списков. jQueryUI Selectable. Нужна помощь в том, чтобы разделить список в 2 набора, по 3 лита в каждом наборе. Цель состоит в том, чтобы позволить пользователю выбирать только один и тот же набор, и каждый набор должен откладывать другие.

<ol id="selectable"> 
    <!--set A --> 
    <li class="ui-state-default">&nbsp;</li> 
    <li class="ui-state-default">&nbsp;</li> 
    <li class="ui-state-default">&nbsp;</li> 
    <!--set B --> 
    <li class="ui-state-default">&nbsp;</li> 
    <li class="ui-state-default">&nbsp;</li> 
    <li class="ui-state-default">&nbsp;</li> 
</ol> 

Спасибо!

Answer 1

Хорошо здесь рабочая скрипку: http://jsfiddle.net/omarjmh/9ur5xx4a/1/

Обратите внимание, что я не делал CSS то же самое, вы должны сделать, что часть себя.

Правильный код довольно прост, вам нужно просто сделать два списка, то есть отдельный 'выбираемые' идентификатор на них, как так:

HTML

<ol id="selectable"> 
     <!--set A --> 
     <li class="ui-state-default seta">Hello &nbsp;</li> 
     <li class="ui-state-default seta">Hello &nbsp;</li> 
     <li class="ui-state-default seta">Hello &nbsp;</li> 
    </ol> 
    <ol id="selectable-1"> 
     <!--set B --> 
     <li class="ui-state-default setb">Hello &nbsp;</li> 
     <li class="ui-state-default setb">Hello &nbsp;</li> 
     <li class="ui-state-default setb">Hello &nbsp;</li> 
    </ol> 

JS

$(function() { 
    $("#selectable").selectable(); 
    $("#selectable-1").selectable(); 

    }); 

Вот и все! При этом вы можете выбрать только один из тегов <li> в каждом списке за раз. Теперь вы можете сделать это красиво ...