Jquery 将列表中禁用复选框上方的启用复选框分组

我正在尝试重新排列复选框列表，以便将启用的复选框（及其标签）分组到禁用的复选框（及其标签）上方。恐怕我只是不明白到目前为止我在这方面看到的那些模糊相关的帖子，也不知道从哪里开始。我所能实现的就是能够使用以下命令选择启用的框：

$（'.CountryListBoxClass_prodn'）.find（“输入：复选框：已启用”）.parent（）…

此外，我希望在两个组之间放置一条水平线，尽管有时不会有任何禁用的复选框，因此并不总是需要一条线。 不确定这是否可行。非常感谢任何人能提供的帮助。小提琴：

---

您可以通过只选择已启用的复选框，然后将它们前置到

CountryListBoxClass\u prodn

。要添加水平线，只需过滤最后启用的复选框，然后插入：

$('input[type="checkbox"]')
  .filter(':enabled')
  .parent()
  .prependTo('.CountryListBoxClass_prodn')
  .filter(':last').
  .after('<hr />');

$（'input[type=“checkbox”]”）
.filter（“：已启用”）
.parent（）
.prependTo（“.CountryListBoxClass_prodn”）
.filter（“：last”）。
.在（“
”）之后；

您可能希望向复选框中添加一个类，并将其用作选择器（上面的代码将选中页面上的所有复选框）

---

您可以通过只选择已启用的复选框，然后将它们前置到

CountryListBoxClass\u prodn

。要添加水平线，只需过滤最后启用的复选框，然后插入：

$('input[type="checkbox"]')
  .filter(':enabled')
  .parent()
  .prependTo('.CountryListBoxClass_prodn')
  .filter(':last').
  .after('<hr />');

$（'input[type=“checkbox”]”）
.filter（“：已启用”）
.parent（）
.prependTo（“.CountryListBoxClass_prodn”）
.filter（“：last”）。
.在（“
”）之后；

您可能希望向复选框中添加一个类，并将其用作选择器（上面的代码将选中页面上的所有复选框）

编辑

我完全误解了这个问题。
下面的解决方案是将选中的

和未选中的
分开。。。未启用
和
禁用

不管怎样，我把它放在那里，因为有一天它会对一个人有用


如果你关心字母顺序和对齐方式

您必须根据
输入值对元素进行排序。

听起来很简单

在两个数组中获取所有选中和未选中的输入
检索他们的价值观并对其进行排序
使用顺序值以正确的顺序追加元素
在两者之间插入一条水平线
由于所有
label
元素都已处理，因此有关对齐的子文件问题将得到解决

下面的代码注释得很好。

;)


$（函数（）{
//禁用所选复选框
$（'.CountryListBoxClass_产品标签输入[id=“UN100”]、输入[id=“UN191”]、输入[id=“UN372”]、输入[id=“UN470”]）.prop（'disabled'，true）；
$（“#ReformatCountries”）。在（“单击”，函数（）{
//检查和取消检查
var checked_checkbox=$（“.CountryListBoxClass_prodn input[type='checkbox']：checked”）；
var unchecked_checkbox=$（“.CountryListBoxClass_prodn input[type='checkbox']”）。非（“：checked”）；
//根据输入值，对选中的
var Alpha_ordered_checked=[]；
对于（i=0；i编辑

我完全误解了这个问题。

下面的解决方案是将
选中的
和
未选中的
…不
启用的
和
禁用的
分开

不管怎样，我把它放在那里，因为有一天它会对一个人有用


如果你关心字母顺序和对齐方式

您必须根据
输入值对元素进行排序。

听起来很简单

在两个数组中获取所有选中和未选中的输入
检索他们的价值观并对其进行排序
使用顺序值以正确的顺序追加元素
在两者之间插入一条水平线
由于所有
label
元素都已处理，因此有关对齐的子文件问题将得到解决

下面的代码注释得很好。

)()


$（函数（）{
//禁用所选复选框
$（'.CountryListBoxClass_产品标签输入[id=“UN100”]、输入[id=“UN191”]、输入[id=“UN372”]、输入[id=“UN470”]）.prop（'disabled'，true）；
$（“#ReformatCountries”）。在（“单击”，函数（）{
//检查和取消检查
var checked_checkbox=$（“.CountryListBoxClass_prodn input[type='checkbox']：checked”）；
var unchecked_checkbox=$（“.CountryListBoxClass_prodn input[type='checkbox']”）。非（“：checked”）；
//根据输入值，对选中的
var Alpha_ordered_checked=[]；
对于（i=0；i请参见下文如何
克隆
和元素节点，然后将其移除并重新插入分隔符下方，这将使用
文档片段
，在将元素插入
DOM
的此类方法中，这是首选的方法，您不应将它们一个接一个地直接插入
文档
d您应该使用
documentFragment
，这样可以更快地完成脚本并缩短脚本时间。下面的脚本将在您每次点击
钮扣


$（函数（）{
//禁用所选复选框
$（'.CountryListBoxClass_产品标签输入[id=“UN100”]、输入[id=“UN191”]、输入[id=“UN372”]、输入[id=“UN470”]）.prop（'disabled'，true）；
//将“已启用”复选框分组到“已禁用”上方
$（“#重新格式化国家”）。单击（函数（）{
let selected=$（“.CountryListBoxClass_prodn input[type='checkbox']：disabled”）；
让fragment=document.createDocumentFragment（）；
if（document.querySelector（'hr'）==null）fragment.appendChild（document.createElement（'hr'））；
已选定。每个（函数（）{
appendChild（this.parentElement.cloneNode（true））；
$（this.parent（）.remove（）；
});
document.querySelector（“.CountryListBoxClass_prodn”）.append（片段）；
});
})；//结束函数
.C
.CountryListBoxClass_prodn label {
display: inline-block;
border: 1px solid transparent;
width: 213px;
background-color: white;
margin: 0px 7px 2px 0px;
}

.CountryListBoxClass_prodn input {
position: relative;
vertical-align: middle;
bottom: 1px;
margin-right: 10px;
}

.CountryListBoxClass_prodn {
border: 1px solid #ebebeb;
Padding: 10px 0px 0px 5px;
background-color: #fcfcfc;
overflow-y: scroll;
font-family: "Verdana";
font-size: 11px;
}

$('input[type="checkbox"]')
  .filter(':enabled')
  .parent()
  .prependTo('.CountryListBoxClass_prodn')
  .filter(':last').
  .after('<hr />');