JSFiddle - React, Tailwind, and code Playground
HTML
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
<ul class="containerElCombo">
<li class="elementCombo">
<input type="checkbox" class="ww99" checked>
<label>Tout</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Lundi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Mardi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Mercredi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Jeudi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Vendredi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Samedi</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>Dimanche</label>
</li>
</ul>
</div>
<div class="containerCombo">
<input type="text" class="resultat">
<input type="button" value="Afficher">
<ul class="containerElCombo">
<li class="elementCombo">
<input type="checkbox" class="ww99" checked>
<label>Tout</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>01</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>02</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>03</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>04</label>
</li>
<li class="elementCombo">
<input type="checkbox">
<label>05</label>
</li>
<li...
CSS
.elementCombo {
background-color: white;
width: 200px;
list-style-type:none;
}
.containerElCombo {
overflow: auto;
height:150px;
width: 250px;
margin-top : 24px;
}
html, body {height: 100%;}
JavaScript
function butval() {
$(':button').each(function () {
flag = $(this).next('.containerElCombo').is(':visible')
$(this).val(flag ? 'Masquer' : 'Afficher');
})
}
$(function () {
//On met tout les checkbox de la class '.ww99' à true
$('.ww99').prop("checked", true);
//Si '.ww99' est coché alors on rend innaccessible toutes les autres checkbox,
if ($('.ww99').is(':checked')) {
$('.ww99').closest(".containerElCombo").find(':checkbox').prop("disabled", true);
$('.ww99').closest(".containerElCombo").find(':checkbox').prop("checked", false);
$('.ww99').closest('.ww99').prop("disabled", false);
$('.ww99').closest('.ww99').prop("checked", true);
}
//Au clique de la checkbox 99
$('.ww99').on('click', function () {
if ($(this).is(':checked')) {
//On rend innaccessible toutes les autres checkbox et on attribue '99' à l'input text
$(this).closest(".containerElCombo").find(':checkbox').prop("disabled", true);
$(this).closest(".containerElCombo").find(':checkbox').prop("checked", false);
$(this).closest('.ww99').prop("disabled", false);
$(this).closest('.ww99').prop("checked", true);
$eltt = $(this).closest('.containerElCombo');
$eltt.prevAll('.resultat').val("99");
}
else {
//Sinon on rend accessible toutes les checkboxes
$(".containerElCombo").find(':checkbox').prop("disabled", false);
}
});
$("html").on('click',"*",function (e) {
e.stopPropagation();
if($(this).parents('.containerCombo').length==0){
$(".containerElCombo").hide();
butval();
}
})
//On cache les éléments dès le début
$(".containerElCombo").hide();
// sur le click des boutons afficher ...
...