如何禁用可选列表的特定元素答案

【问题标题】：how to disable a specific element of selectable list如何禁用可选列表的特定元素
【发布时间】：2013-02-04 16:39:56
【问题描述】：

我想禁用可选列表的特定元素。我可以禁用整个列表，但是当我尝试使用特定元素时，它不起作用。

$('#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 并一个接一个地禁用它们。

【问题讨论】：

标签： jquery-ui jquery-ui-selectable

【解决方案1】：

没有直接的方法可以做到这一点（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 类上使用 filter：

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

参考资料：

【讨论】：

@user2040101 你能解释一下你试图禁用什么以及如何禁用吗？
我希望能够禁用和启用列表中的任何元素。当我禁用某些元素时，我无法在不刷新页面的情况下重新启用它。因为当我点击这些元素时我正在收集数据，如果它们被禁用，我将无法再选择它们
@user2040101 我已经更新了答案，以向您展示如何切换可选项目的启用/禁用状态的示例。这是你的意思吗？
谢谢，但这不是我要找的方式。因为我在可选中禁用了一些 li，所以每次单选按钮都有变化。当有另一个变化时，我希望一切都可以再次选择并禁用那些需要的东西。所以现在我的问题是我无法重新启用 li
@user2040101 我认为你需要提供更多代码，如果你展示你所拥有的，它会更容易帮助你。上面的示例向您展示了如何禁用和重新启用 <li>-tags 上的可选项。您应该能够解决这个问题（只需在<li>-tags 中添加或删除 selectable 类）。

【解决方案2】：

其实你现在就可以做到。你必须在你的项目中添加你想要的类，例如“不可选择”，并在你的过滤器选项中使用这个 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)"
});

您将能够选择 #selectable 的所有 li 子项，但具有 .unselectable 类的 li 除外。然后你只需要在必要时切换这个类。

【讨论】：