samedi 13 janvier 2018

Can column-count be split into 2 checkbox areas in a div?

I have a list of checkboxes in a div and some jquery which splits the enabled checkboxes and places them in an area above the disabled checkboxes (this is nothing to do with 'ticked' checkboxes). For each area, I want to display 2 columns in a vertical flow so the checkboxes show alphabetically top down. The layout of the labels should be as follows:

Austria        Germany
Denmark        Hungary
Estonia        Latvia
_______________________

Bulgaria       Ireland
Croatia        Malta

The country list needs to be flexible, so simply rearranging the labels in HTML won't work. I've naively tried using column-count and column-width, but this messes up the enabled and disabled checkbox areas. Ideally a CSS solution would be great but not sure its possible. Any help greatly appreciated. Fiddle: http://ift.tt/2AYK1cc

http://ift.tt/1q8JMjW

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




Aucun commentaire:

Enregistrer un commentaire