Group enabled checkboxes above disabled ones in a list

I'm trying to re-order a list of checkboxes so that enabled checkboxes (with their labels) are grouped above disabled checkboxes (with their labels). I'm afraid I just don't understand the vaguely related posts I've seen so far on this and don't really know where to start. All I've been able to achieve is the ability to select enabled boxes using: $('.CountryListBoxClass_prodn').find("input:checkbox:enabled").parent()...

Furthermore, I'd like a horizontal line to be put between the 2 groups, although sometimes there won't be any disabled checkboxes so a line won't always be needed. Not sure if this is possible. Many thanks for any help anyone can offer. Fiddle: http://ift.tt/2m71FVs

http://ift.tt/1q8JMjW


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