单击时启用和禁用可排序的 jquery答案

【问题标题】：Enable and disable jquery sortable on click单击时启用和禁用可排序的 jquery
【发布时间】：2016-02-23 12:08:04
【问题描述】：

我有一个可以在点击时切换的按钮。此按钮在我的 html 中名为“subtaskTaskList”的列表中启用 jquery 可排序类。但是，我可以让按钮切换，但可排序的启用和禁用似乎没有响应。请参阅下面的代码。

<button id="sortButton" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-adjust"></span></button>

 $("#sortButton").click(function(){
    if($("#sortButton").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

此代码在我的控制台中留下一个错误，提示如果未初始化 sortable，则无法禁用它。我尝试了此代码的变体，包括：

$("#sortButton").click(function(){
    if($("#sortButton .glyphicon").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

还有：

$("#sortButton").click(function(){
    if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
        $("#subtaskTaskList").sortable();
        $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
    }else{
     $("#subtaskTaskList").sortable('disable');
        $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
    }
});

后两段代码甚至不会导致字形图标的切换。任何投入将不胜感激。我查看了堆栈溢出，但没有发现任何与此问题相关的具体问题。

【问题讨论】：

请尝试制作一个小提琴来解决您的问题。

标签： javascript jquery html twitter-bootstrap jquery-ui

【解决方案1】：

使用外部函数来切换可排序的启用-禁用

$(document).on("click","button#switcher",function(){
    sortDisable();
})

function sortDisable() {
    $( "ul#sortme" ).sortable("disable");
}

所以你的代码：

$("#sortButton").click(function(){
        if($("#sortButton").find("span").hasClass("glyphicon-adjust")){
            sortEnable("#subtaskTaskList");
            $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
        }else{
            sortDisable("#subtaskTaskList");
            $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
        }
    });


    function sortEnable( target ) {
        $( target ).sortable("enable");
    }
    function sortDisable( target ) {
        $( target ).sortable("disable");
    }

【讨论】：

这与向 span 添加 id 一起工作，以使选择更容易。我真正的问题是 hasClass 没有识别正确的选择器。谢谢！
我没有测试你的代码，只是在我当前的项目中尝试了我的想法 :) 不客气

【解决方案2】：

以下是启用/禁用sortable()的方法：

$('#sortButton').click(function() {
    //check if sortable() is enabled and change and change state accordingly
  // Getter
  var disabled = $("#subtaskTaskList").sortable( "option", "disabled" );
  if (disabled) {
    $("#subtaskTaskList").sortable( "enable" );
    $("#sortButton .glphyicon").toggleClass("glyphicon-adjust glyphicon-lock");
  }
  else {
    $("#subtaskTaskList").sortable("disable");
    $("#sortButton .glphyicon").toggleClass("glyphicon-lock glyphicon-adjust");
  }
});

【讨论】：