Bonjour à tous
je vais avoir besoin de vos lumières
J’ai un widget action pour une case à cocher, qui marche très bien.
je voudrais en faire un autre, mais pour commande info/binaire
j’ai reprise le code de mon widget, ca fonctionne bien mais la checkbox reste clicable, et même si cela ne modifie pas la commande, c’est pas top
savez vous comment modifier ce code pour que la checkbox soit en readonly ?
merci
<div style="padding:10px; width:250px; height:40px;" class="cmd cmd-widget container-fluid #history#" data-type="info" data-subtype="binary" data-template="BadgeDesign" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<span class="displayDay#id#">#name_display#</span>
<span class="customcheckbox#id#">
<input class="Toggle#uid# action iconCmd" type="checkbox" id="ccb0#uid#" />
<label for="ccb0#uid#"></label>
</span>
<style>
.displayDay#id# {
display:inline-block;
width:150px;
line-height:30px;
font-size:18px;
font-weight:bold;
text-align:right;
margin-right:10px;
color: #CECECE;
}
.customcheckbox#id# {
float:right;
margin-top:2px;
height:30px;
width:30px;
--size:26px;
--checkcolor:black;
position:relative;
}
.customcheckbox#id# input[type="checkbox"] {opacity:0;}
.customcheckbox#id# label {position:absolute;top:0;left:0;cursor:pointer;}
.customcheckbox#id# label::before, .customcheckbox#id# label::after {
content: "";
display:inline-block;
position:absolute;
}
.customcheckbox#id# label::before {
height:var(--size);
width:var(--size);
}
.customcheckbox#id# label::after {
height:calc(var(--size) * 0.375);
width:calc(var(--size) * 0.5625);
border-left:3px solid var(--checkcolor);
border-bottom:3px solid var(--checkcolor);
transform: rotate(-45deg);
left:calc(var(--size) * 0.22);
top:calc(var(--size) * 0.2);
}
.customcheckbox#id# input[type="checkbox"] + label::after {
content:none;
}
.customcheckbox#id# input[type="checkbox"]:checked + label::after {
content:"";
}
.customcheckbox#id# input[type="checkbox"] + label::before {
border:1px solid #FFF;
background-color: #bababa;
border-radius : 5px;
/*box-shadow: 1px 2px 9px 0 #000; */
/*box-shadow: #000 4px 4px;*/
}
.customcheckbox#id# input[type="checkbox"]:checked + label::before {
border:1px solid #FFF;
background-color: #bababa;
border-radius : 5px;
/*box-shadow: 1px 2px 9px 0 #000; */
/*box-shadow: #000 4px 4px;*/
}
.customcheckbox#id# input[type="checkbox"]:focus + label::before {
outline: var(--bordercolor) auto 5px;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
// Récupération des valeurs
var valeur = _options.display_value;
$('.cmd[data-cmd_id=#id#]').show();
if (valeur == 1) {
$('.Toggle#uid#').prop('checked', true);
} else {
$('.Toggle#uid#').prop('checked', false);
}
$('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
}
</script>
</div>