J'utilise une case à cocher et je veux que les gens puissent le cocher/décocher. Cependant, quand ils décochent cela, j'utilise un popup modal jQueryUI pour confirmer qu'ils veulent vraiment le faire. Ainsi, ils peuvent cliquer OK ou Cancelet je veux que ma case à cocher ne soit décochée que s’ils cliquent OK.
C’est la raison pour laquelle j’aimerais saisir l’événement décoché pour éviter que la case à cocher ne soit décochée visuellement, et la décocher moi-même par programmation si l’utilisateur clique sur OK.
Comment pourrais-je faire ça?
PS: Je sais que je pourrais le vérifier à nouveau si l'utilisateur clique dessus. Cancel mais cela déclencherait l'événement check
que je ne veux pas.
$("#checkboxID").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
// do the confirmation thing here
e.preventDefault();
return false;
}
});
Quelque chose comme:
$("#test").on('change', function() {
this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
});
$("#yourCheckBoxId").on('change',function(e){
e.preventDefault();
$("#yourPopDiv").popup();
});
preventDefault()
désactive le comportement par défaut de votre input[type="checkbox"]
Et sur votre popup popup
$("#ok").on('click',function(){
$("#yourCheckBoxId").attr("checked",true);
});
$("#checkboxID").click(function(e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
//check it
} else {
// prevent from being unchecked
this.checked=!this.checked;
}
});
Solution Pure CSS
Sélectionnez la case à cocher comme -
input[type="checkbox"] {
pointer-events: none;
}
Fonctionne plutôt bien et vous pouvez maintenant basculer votre case à cocher sur n'importe quel élément de votre choix.