Question

我正在尝试重新排序复选框列表，以便将已启用的复选框（及其标签）分组到已禁用的复选框（带有标签）上方。我担心我只是不明白我到目前为止看到的模糊相关的帖子，并且不知道从哪里开始。我能够实现的是使用$('.CountryListBoxClass_prodn').find("input:checkbox:enabled").parent()...

选择启用的框的能力

此外，我想在两组之间放置一条水平线，虽然有时候不会有任何禁用的复选框，因此不一定需要一条线。不确定这是否可行。非常感谢任何人提供的任何帮助。小提琴：http://jsfiddle.net/37kjbhx6/

http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js


<input type='button' id='ReformatCountries' value='Reformat checkboxes' />

<div class="CountryListBoxClass_prodn">
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN40" value="Austria" />Austria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN191" value="Croatia" />Croatia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN208" value="Denmark" />Denmark</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN233" value="Estonia" />Estonia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN276" value="Germany" />Germany</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN348" value="Hungary" />Hungary</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN372" value="Ireland" />Ireland</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN428" value="Latvia" />Latvia</label>
  <label class="myEuropeCountries">
    <input type="checkbox" id="UN470" value="Malta" />Malta</label>
</div>

$(function() {

// Disable selected checkboxes
  $('.CountryListBoxClass_prodn label input[id="UN100"], input[id="UN191"], 
input[id="UN372"], input[id="UN470"]').prop('disabled', true);

// ---------

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

    // Group 'enabled' checkboxes above 'disabled'

  });

}); // End function

.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;
}

Answer 1

在将require 'test_helper' class IssueTest < ActiveSupport::TestCase test 'valid issue' do issue = Issue.new(types: 'Cleanliness') assert user.valid? end end和元素节点移除并重新插入到分隔符下方之前，请参阅下面的localhost:myproject davea$ rails test test/models/issue_test.rb Running via Spring preloader in process 83001 Run options: --seed 28420 # Running: E /Users/davea/.rvm/gems/ruby-2.3.0@global/gems/did_you_mean-1.0.0/lib/did_you_mean/spell_checkers/name_error_checkers/variable_name_checker.rb:10: [BUG] Segmentation fault at 0x000000000000f2 ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin17] -- Crash Report log information -------------------------------------------- See Crash Report log file under the one of following: ...和元素节点，这使用了clone这种方法中首选的方法，在这种方法中将元素插入{{1}你不应该将它们一个一个地直接插入到documentFragment中，而应该使用DOM，这样可以加快速度并缩短脚本时间。下面的脚本将在每次点击时插入分隔符按钮

document

documentFragment

$(function() {
  // Disable selected checkboxes
  $('.CountryListBoxClass_prodn label input[id="UN100"], input[id="UN191"], input[id="UN372"], input[id="UN470"]').prop('disabled', true);

  // Group 'enabled' checkboxes above 'disabled'
  $('#ReformatCountries').click(function() {
    let selected = $(".CountryListBoxClass_prodn input[type='checkbox']:disabled");

    let fragment = document.createDocumentFragment();
    if (document.querySelector('hr') === null) fragment.appendChild(document.createElement('hr'));

    selected.each(function() {
      fragment.appendChild(this.parentElement.cloneNode(true));
      $(this).parent().remove();
    });

    document.querySelector(".CountryListBoxClass_prodn").append(fragment);
  });

}); // End function

Answer 2

您可以通过仅选中已启用的复选框，然后将它们预先添加到CountryListBoxClass_prodn来执行此操作。要添加水平线，只需过滤最后一个启用的复选框，然后插入：

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

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

Here's a fiddle

Answer 3

修改

我完全误解了这个问题以下解决方案是隔离unchecked和enabled ...不disabled和input。

无论如何，我把它留在那里，因为它可能对某一天有用。

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

您必须根据label值对元素进行排序这听起来很容易......

以两个数组获取所有选中和未选中的输入。

检索他们的价值并订购。

使用订单值以正确的顺序附加元素。

在两者之间插入一条水平线。

然后修复了关于对齐的子问题，因为已经处理了所有$(function() { // Disable selected checkboxes $('.CountryListBoxClass_prodn label input[id="UN100"], input[id="UN191"], input[id="UN372"], input[id="UN470"]').prop('disabled', true); $("#ReformatCountries").on("click",function(){ // Get all checked and unchecked var checked_checkbox = $(".CountryListBoxClass_prodn input[type='checkbox']:checked"); var unchecked_checkbox = $(".CountryListBoxClass_prodn input[type='checkbox']").not(":checked"); // Based on the input value, order the checked var Alpha_ordered_checked = []; for(i=0;i<checked_checkbox.length;i++){ Alpha_ordered_checked.push($(checked_checkbox[i]).val()); } Alpha_ordered_checked = Alpha_ordered_checked.sort(); // Based on the input value, order the unchecked var Alpha_ordered_unchecked = []; for(i=0;i<unchecked_checkbox.length;i++){ Alpha_ordered_unchecked.push($(unchecked_checkbox[i]).val()); } Alpha_ordered_unchecked = Alpha_ordered_unchecked.sort(); // Append the checked for(i=0;i<Alpha_ordered_checked.length;i++){ $(".CountryListBoxClass_prodn").append( $("input[value='"+Alpha_ordered_checked[i]+"']").parent() ); } // Append an horizontal line (remove previous if any) $(".CountryListBoxClass_prodn").find(".hr").remove(); $(".CountryListBoxClass_prodn").append("<hr class='hr'>"); // Append the unchecked for(i=0;i<Alpha_ordered_unchecked.length;i++){ $(".CountryListBoxClass_prodn").append( $("input[value='"+Alpha_ordered_unchecked[i]+"']").parent() ); } }); // End on click }); // End function个元素。

下面的代码评论很好 ;）

＆＃13;
＆＃13;
.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; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='button' id='ReformatCountries' value='Reformat checkboxes' /> <div class="CountryListBoxClass_prodn"> <label class="myEuropeCountries"> <input type="checkbox" id="UN40" value="Austria" />Austria</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN191" value="Croatia" />Croatia</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN208" value="Denmark" />Denmark</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN233" value="Estonia" />Estonia</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN276" value="Germany" />Germany</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN348" value="Hungary" />Hungary</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN372" value="Ireland" />Ireland</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN428" value="Latvia" />Latvia</label> <label class="myEuropeCountries"> <input type="checkbox" id="UN470" value="Malta" />Malta</label> </div>
＆＃13;
{{1}}
＆＃13;
＆＃13;
＆＃13;

已在列表中启用已禁用的复选框

3 个答案:

Here's a fiddle