如何为div中启用/禁用复选框区域分别设置column-count双列布局？

我明白你的需求了——要把启用状态的复选框放在禁用的上方，每个区域都是垂直流式双列，而且因为列表是动态的，不能硬改HTML顺序。之前用column-count给整个容器设置布局导致分区混乱，那我们可以把启用和禁用的复选框分别放进独立的子容器里，给每个子容器单独设置列布局，同时加上排序逻辑，完美解决问题！

实现思路 #

1. 分离并排序：先用jQuery把启用和禁用的复选框标签分开，各自按国家名称字母排序
2. 独立分区布局：把两个分组分别放进单独的容器，给每个容器设置双列布局，这样就不会出现跨分区的内容
3. 动态更新DOM：清空原容器，按顺序插入排序后的启用组、分隔线、禁用组

完整代码示例 #

HTML

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

CSS

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

/* 每个分组的双列布局 */
.country-group {
  column-count: 2;
  column-gap: 20px;
  margin-bottom: 15px;
}

.CountryListBoxClass_prodn label {
  display: block; /* 用block让每个label占列内一行，垂直流式排列 */
  margin-bottom: 8px;
}

.CountryListBoxClass_prodn input {
  vertical-align: middle;
  margin-right: 6px;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 15px 0;
}

jQuery

$(function() {
  // 1. 禁用指定复选框
  $('.CountryListBoxClass_prodn label input[id="UN100"], input[id="UN191"], input[id="UN372"], input[id="UN470"]').prop('disabled', true);

  // 2. 分离启用和禁用的label元素
  const enabledLabels = $('.CountryListBoxClass_prodn label:has(input:enabled)');
  const disabledLabels = $('.CountryListBoxClass_prodn label:has(input:disabled)');

  // 3. 按国家名称字母排序（根据input的value值排序）
  const sortLabels = (labels) => {
    return labels.sort((a, b) => {
      const textA = $(a).find('input').val().toLowerCase();
      const textB = $(b).find('input').val().toLowerCase();
      return textA.localeCompare(textB);
    });
  };

  const sortedEnabled = sortLabels(enabledLabels);
  const sortedDisabled = sortLabels(disabledLabels);

  // 4. 构建分组容器并插入DOM
  const enabledGroup = $('<div class="country-group"></div>').append(sortedEnabled);
  const disabledGroup = $('<div class="country-group"></div>').append(sortedDisabled);

  // 清空原容器，插入新内容
  $('.CountryListBoxClass_prodn').empty()
    .append(enabledGroup)
    .append('<hr />')
    .append(disabledGroup);
});

效果说明 #

• 启用的复选框会按字母排序后，在顶部以双列垂直流式展示（第一列从上到下：Austria → Denmark → Estonia，第二列：Germany → Hungary → Latvia）
• 禁用的复选框同样按字母排序，在分隔线下方以双列展示
• 每个分组的列布局是独立的，不会出现启用和禁用内容混排的情况，完全符合你的需求

内容的提问来源于stack exchange，提问作者Silverburch