jquery selectable - 해당 값 사용 안 함

Question

구현하려는 항목과 비슷한 항목을 찾고 있지만 스택이나 네트워크에서 찾지 못했습니다. jQuery를 선택 사용 하지만, UL의 하나 이상의 설정 : 내가 어떤 옵션에서 '1'을 선택하면

<div> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
    <ul> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
    </ul> 
</div> 

내가 뭘 할 수 있기를 원하는 것은입니다, 모든 다른 '1 년대 사용할 수 없습니다 . 다른 모든 선택 옵션에도 동일하게 적용되므로 기본적으로 한 번에 동일한 옵션 중 하나만 선택할 수 있습니다. name 및 value 태그를 사용하여 라디오 버튼으로이 작업을 수행 할 수 있지만 선택 가능한 인터페이스 내에서 구현하는 방법은 확실하지 않습니다. 도움이 필요하거나 누군가 내게 비슷한 응용 프로그램을 가르쳐 주셔서 감사합니다.

Answer 1

filter 옵션을 사용하여 일부 항목 만 선택할 수 있습니다. 변경 후에는 모든 요소를 ​​검토하고 필요에 따라 필터를 업데이트해야합니다.

샘플 구현은 다음과 같이 (라이브 데모 here 참조) 될 수 있습니다

$(document).ready(function() { 

    function enableAll() { 
     $('li').addClass('enabled'); 
    } 

    function disableSelected(selected) { 

     // iterate thru all list items 
     $.each($('li'), function(i, item) { 

      // if the text is selected somewhere.. 
      if ($.inArray($(this).text().toLowerCase(), selected) >= 0) { 

       // ..and it's not here 
       if (!$(this).hasClass('ui-selected')) { 

        // remove 
        $(this).removeClass('enabled'); 
       } 
      } 
     }); 
    } 

    $('ul').selectable({ 

     // only matching items will be selectable 
     filter: '.enabled', 

     // change handler 
     stop: function(event, ui) { 

      // we will collect selected texts in this variable 
      var selectedTexts = new Array(); 

      // go thru all selected items (not only in current list) 
      $('.ui-selected').each(function() { 

       // extract selected text 
       var text = $(this).text().toLowerCase(); 

       // add to array if not already there 
       if ($.inArray(text, selectedTexts) < 0) { 
        selectedTexts.push(text); 
       } 
      }); 

      // enable all list items for selectable 
      enableAll(); 

      // disable list items with text that is already selected 
      disableSelected(selectedTexts); 
     } 
    }); 

    // initialization 
    enableAll(); 

});​