Javascript jQuery Sortable-只允许将某些项放到某些列表中

我正在使用jQueryUISortable实现一个分类选择，链接到一组单选按钮。这一部分已经运行了好几年了。（）现在，客户想要修改它：一些项目现在应该只允许进入某些类别，我完全被卡住了

在后端，禁用某些单选按钮非常容易：

<ul id="L" class="L ui-sortable">
    Available (A):
    <li id='L_1'>
    <input type='radio' name='L_1' id='L_1_A' value='A'>
      <label for='L_1_A'>A</label>
    <input type='radio' name='L_1' id='L_1_B' disabled='disabled' value='B'>
      <label for='L_1_B'>B</label>
    <input type='radio' name='L_1' id='L_1_C' value='C'>
      <label for='L_1_C'>C</label>
    Item 1 can't go in B
    </li>
    <li id='L_2'>
    <input type='radio' name='L_2' id='L_2_A' value='A'>
      <label for='L_2_A'>A</label>
    <input type='radio' name='L_2' id='L_2_B' value='B'>
      <label for='L_2_B'>B</label>
    <input type='radio' name='L_2' id='L_2_C' disabled='disabled' value='C'>
      <label for='L_2_C'>C</label>
    Item 2 can't go in C
    </li>
    <!-- etc. -->
</ul>
<ul id='L_B' class='L ui-sortable cat'>Selected - B</ul>
<ul id='L_C' class='L ui-sortable cat'>Selected - C</ul>

---

我应该注意到，我完全不擅长使用大括号的编程语言。我写了上面的代码，但我不能告诉你它的大部分功能，更不用说它为什么工作了。因此，如果你能用最简单的术语来描述你的答案，我将不胜感激。

那么，我有没有提到我讨厌JavaScript？但我让它工作（无灰显示，但我早就不再关心这一点）和灰显示和一切

第1部分，忘记在jQuery中检测禁用的单选按钮。（

（“：disabled”）

用作选择器，但它返回一个单选按钮，而不是其父列表项。）相反，只需向列表项添加一个或多个类即可

<li class="noB">
    <label><input type="radio" name="L1" value="A" />A</label>
    <label><input type="radio" name="L1" value="B" disabled="disabled" />B</label>
    <label><input type="radio" name="L1" value="C" />C</label>
    Item 1 can't go in B
</li>

.sender部分至关重要：我不知道在使用

ui.item

或

li.noB

或其他工具尝试各种事情时，我永久性地丢失了多少头发。（这对我来说毫无意义：我想防止的是将项目放在错误的位置，那么为什么我需要取消将其从父列表中删除？但无论如何。）

在我的例子中，第3部分是将列表标签移出列表，因为除了不太有效之外，它还使

取消

执行straaaange操作

第4部分，灰色：在每个可排序框的“开始”函数中使用

.addClass

，在“停止”函数中使用

.removeClass

。我把它们放在

receive:function（…）{…}

之后，但是顺序应该无关紧要。（毫无疑问，有某种方法可以编写这个函数一次，每次调用它，但我有没有提到JavaScript和我是如何相处的？）

别忘了在CSS中定义“disabled”类，否则所有这些体操都会做得很好。。。没什么

---

使用JSFIDLE:

我在课程的编解码器中做了类似的事情……我将发布代码和指向该练习的链接。

<li class="noB">
    <label><input type="radio" name="L1" value="A" />A</label>
    <label><input type="radio" name="L1" value="B" disabled="disabled" />B</label>
    <label><input type="radio" name="L1" value="C" />C</label>
    Item 1 can't go in B
</li>

$("#L_B").sortable({
    connectWith: '.L',
    containment: '#ListContainer',
    receive: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $(ui.sender).sortable("cancel");
        }
        else {
            $(ui.item).find('input:radio')[1].checked = true;
        }
    },
}).disableSelection();

    start: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").addClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").addClass("disabled");
        }
    },
    stop: function (event, ui) {
        if ($(ui.item).hasClass("noB")) {
            $("#L_B").removeClass("disabled");
        }
        if ($(ui.item).hasClass("noC")) {
            $("#L_C").removeClass("disabled");
        }
    }