可以将列数拆分为 div 中的 2 个复选框区域吗？

Question

我有一个 div 中的复选框列表和一些 jquery，它拆分启用的复选框并将它们放在禁用的复选框上方的区域中（这与“勾选”复选框无关）。对于每个区域，我想在垂直流中显示 2 列，以便复选框按字母顺序自上而下显示。标签的布局应如下所示：

Austria        Germany
Denmark        Hungary
Estonia        Latvia
_______________________

Bulgaria       Ireland
Croatia        Malta

国家/地区列表需要灵活，因此简单地重新排列 HTML 中的标签是行不通的。我天真地尝试过使用列数和列宽，但这会弄乱启用和禁用的复选框区域。理想情况下，CSS 解决方案会很棒，但不确定是否可行。非常感谢任何帮助。小提琴：http://jsfiddle.net/d7c56s00/

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

<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);

  // -------------------

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

}); // End function

.

.CountryListBoxClass_prodn {
  //column-count: 2;
  border: 1px solid #ebebeb;
}

.CountryListBoxClass_prodn label {
  display: inline-block;
  width: 213px;
}

.CountryListBoxClass_prodn input {
  vertical-align: middle;
}

Answer 1

使用单独的 div

$(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'

  $('input[type="checkbox"]') .filter(':enabled').parent().prependTo('.above').filter(':last');

}); // End function

*{
  box-sizing:border-box;
}

.CountryListBoxClass_prodn {
  border: 1px solid #ebebeb;
}

.above, .bellow{
  column-count: 2; column-width:50%;
  column-rule:none;   
  width:100%;
  padding:2em;
  border-bottom:1px solid grey;
}

.CountryListBoxClass_prodn label {
  display: inline-block;
  width: 213px;
}

.CountryListBoxClass_prodn input {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="CountryListBoxClass_prodn">
  <div class="above">
  
  </div>
  <div class="bellow">
    <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>
</div>