Aide sur code de widget "Case à cocher"

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>

Salut,

A première vue tu peux ajouter disabled dans la balise input

<input class="Toggle#uid# action iconCmd" type="checkbox" id="ccb0#uid#" disabled/>
1 « J'aime »

j’ai cherché un moment sur du readonly du onclick mais toujours sur la partie CSS, même pas pensé à regarder directement sur la balise INPUT… Merci @Salvialf

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.