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