4

選択可能なリストの特定の要素を無効にしたい。リスト全体を無効にすることはできますが、特定の要素を試してみると機能しません。

$('#disableButton').click(function(){  

    $('#selectable li#b ').selectable('disable');
});

http://jsfiddle.net/Komlan/RYWaZ/1/

これが私のコードです

    //reset seats
function resetSelect(){
    var options = { filter: "li.selectable" };
$( "#selectable").selectable(options);               

}
//Ajax get taken seats
$('input[name="choice"]').change(function(){
    resetSelect();
    var sc_id = $('input:radio[name=choice]:checked').val();

    $.ajax({
        url: 'seatings.php',
        data:{ sc_id:sc_id},
        type: "POST",
        dataType:'text',
        success: function(data){
             var id = data.split(",");
             for (var i=0;i<id.length -1;i++){
             alert(id[i]);
                var string = "#"+id[i];
                $(string).css("color","red");
                $('#selectable li'+string).removeClass("selectable ui-selected"); 
             }
                var options = { filter: "li.selectable" };
            $( "#selectable" ).selectable('destroy').selectable(options);                
        }

    }); 
});

要約すると、ラジオボタングループに変更があるたびに、一連のIDを取得し、それらを次々に無効にします。

4

2 に答える 2

7

これを行うための簡単な方法はありませんが（AFAIK）、使用できる小さなハックがあります（覚えておいてください、これは単なるハックであり、おそらく最善ではありません）。

「選択可能な」cssクラス（または必要なもの）を追加します。

<ol id="selectable">
  <li class="ui-widget-content selectable" id="ok"> 1</li>
  <li class="ui-widget-content selectable"> 2</li>
  <li class="ui-widget-content selectable"> 3</li>
  <li class="ui-widget-content selectable"> 4</li>
  <li class="ui-widget-content selectable"> 5</li>
  <li class="ui-widget-content selectable"> 6</li>
  <li class="ui-widget-content selectable"> 7</li>
</ol>

そして、そのcssクラスでフィルターを使用します。

// Create a filter to only make <li> with the specified css class, selectable.
var options = { filter: "li.selectable" };
$( "#selectable" ).selectable(options);

$('#lol').click(function(){
    console.log('dsfds');

    // Remove/add (toggle) the class used in the filter on the <li> you want to remove the selectable.
    // (Also remove the ui-selected in case it's selected.)
    $('#selectable li#ok').toggleClass("selectable").removeClass("ui-selected");

    // Now destroy the selectable and re-create it with the filter again.
    // We removed the css class from a <li> used in the filter, so it won't be selectable again.
    $( "#selectable" ).selectable('destroy').selectable(options);
});

更新： http： //jsfiddle.net/RYWaZ/7/

参照：

于 2013-02-04T17:17:15.930 に答える
5

実際、あなたは今これを達成することができます。必要なクラス（たとえば「unselectable」）をアイテムに追加し、フィルターオプションでこのcssトリックを使用する必要があります：item：not（.unselectable）

HTML：

<ul id="selectable">
 <li class="unselectable"> 1</li>
 <li> 2</li>
 <li> 3</li>
</ul>

Jquery：

$( "#selectable" ).selectable({
 filter:"li:not(.unselectable)"
});

.unselectableクラスを持つliを除いて、＃selectableのすべてのli子を選択できます。次に、必要に応じてこのクラスを切り替える必要があります。

于 2017-02-23T07:59:37.550 に答える