Empêchez la case à cocher de cocher / vérifier COMPLETEMENT

essayer

 event.stopPropagation(); 

http://jsfiddle.net/DrKfE/3/

La meilleure solution que j'ai trouvée:

 $('input[type="checkbox"]').click(function(event) { var $checkbox = $(this); // Ensures this code runs AFTER the browser handles click however it wants. setTimeout(function() { $checkbox.removeAttr('checked'); }, 0); event.preventDefault(); event.stopPropagation(); }); 

Cet effet ne peut pas être supprimé. Je crains. Dès que vous cliquez sur la case à cocher, l'état (et le rendu) est modifié. Ensuite, les gestionnaires d'événements seront appelés. Si vous effectuez un event.preventDefault() , la case à cocher sera réinitialisée après l'exécution de tous les gestionnaires. Si votre gestionnaire a un temps d'exécution prolongé (facilement vérifiable avec une alert() modal alert() ) et / ou le moteur de rendu est repeint avant de réaffecter, la boîte clignera.

 $('input[type="checkbox"]').click(function(event) { this.checked = false; // reset first event.preventDefault(); // event.stopPropagation() like in Zoltan's answer would also spare some // handler execution time, but is no more needed here // then do the heavy processing: alert('Break'); }); 

Cette solution réduira le scintillement au minimum, mais ne peut pas l'entraver vraiment. Voir la réponse de Thr4wn et RobG pour savoir comment simuler une case à cocher. Je préférerais ce qui suit:

 <button id="settings" title="open extended settings"> <img src="default_checkbox.png" /> </button> 

 document.getElementById("settings").addEventListener("click", function(e) { var img = this.getElementsByTagName("img")[0]); openExtendedSettingsDialog(function callbackTick() { img.src = "checked_checkbox.png"; }, function callbackUntick() { img.src = "unchecked_checkbox.png"; }); }, false); 

Avec CSS, vous pouvez modifier l'image de la case à cocher. Voir http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ et aussi CSS Styling Checkboxes .

Je désactive la case à cocher, mais remplacez-la par une image d'une case à cocher active. De cette façon, la case à cocher ne semble pas désactivée, mais ne pourra pas être cliquable.

De mon point de vue, c'est aussi simple que:

 $(this).prop('checked', !$(this).prop('checked')); 

Fonctionne à la fois pour les boîtes cochées et non cochées

Cela me semble que vous utilisez le mauvais élément d'interface, un bouton plus approprié serait un bouton désactivé par défaut, mais activé lorsque cette option est disponible. L'image affichée peut être ce que vous voulez.

 <button disabled onclick="doSomething();">Some option</button> 

Lorsque les utilisateurs ont sélectionné cette fonction, activez le bouton. L'image sur le bouton peut être modifiée par CSS selon qu'il soit activé ou non, ou par la fonction enable / disable.

par exemple

 <script type="text/javascript"> function setOption(el) { var idMap = {option1:'b0', option2: 'b1'}; document.getElementById(idMap[el.value]).disabled = !el.checked; } </script> <div><p>Select options</p> <input type="checkbox" onclick="setOption(this);" value="option1"> Option 1 <br> <input type="checkbox" onclick="setOption(this);" value="option2"> Option 2 <br> </div> <div> <button id="b0" onclick="alert('Select…');" disabled>Option 1 settings</button> <button id="b1" onclick="alert('Select…');" disabled>Option 2 settings</button> </div> 

Enroulez la case à cocher avec un autre élément qui bloque les événements du pointeur (probablement via CSS). Ensuite, manipulez l'événement de clic de l' emballage au lieu de la case à cocher directement. Cela peut être fait de plusieurs façons, mais il s'agit d'une implémentation d'exemple relativement simple:

 $('input[type="checkbox"').parent('.disabled').click( function() { // Add in whatever functionality you need here alert('Break'); }); 

 /* Insert an invisible element that covers the checkbox */ .disabled { position: relative; } .disabled::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Only wrapped checkboxes are "disabled" --> <input type="checkbox" /> <span class="disabled"><input type="checkbox" /></span> <input type="checkbox" /> <span class="disabled"><input type="checkbox" /></span> <span class="disabled"><input type="checkbox" /></span> <input type="checkbox" /> 

La méthode Event.preventDefault devrait fonctionner pour keydown événements de change , de mousedown et de mousedown , mais pas dans mes tests.

Ma solution à ce problème dans une extension Mozilla Firefox 53.0 était de basculer une classe HTML qui a activé / désactivé les pointer-events: none déclaration CSS pointer-events: none appliqué à la case à cocher. Cela concerne le cas du curseur, mais pas le cas clé. Voir https://www.w3.org/TR/SVG2/interact.html#PointerEventsProp .

J'ai abordé le cas clé en ajoutant / supprimant un tabindex="-1" HTML tabindex="-1" . Voir https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex .

Notez que la désactivation du pointer-events désactive votre capacité à déclencher des curseurs CSS sur le vol stationnaire (p. Ex., cursor: not-allowed ). Ma case à cocher a déjà été enveloppée dans un élément d' span , donc j'ai ajouté une classe HTML à cet élément de span lequel j'ai ensuite renvoyé ma déclaration de cursor CSS.

Notez également que l'ajout d'un tabindex="-1" ne supprime pas la mise au point de la case à cocher, de sorte qu'il faudra le HTMLElement.blur() explicitement en utilisant la méthode HTMLElement.blur() ou en concentrant un autre élément pour éviter les entrées de clé si La case à cocher est l'élément actif au moment où l'attribut est ajouté. Que la case à cocher soit ou non, l'élément focalisé peut être testé avec my_checkbox.isEqualNode(document.activeElement) .