Previene la casella di controllo deselezionando quando si fa clic (senza disattivare o readonly)

Question

Sto utilizzando una casella di controllo e voglio che le persone siano in grado di selezionare/deselezionare. Tuttavia, quando deselezionano, sto usando un popup modale jQueryUI per confermare che vogliono davvero farlo. Quindi possono fare clic su OK o Annulla e desidero deselezionare la casella di controllo solo se fanno clic su OK.
Ecco perché mi piacerebbe catturare l'evento deselezionare per evitare che la casella di controllo sia visivamente deselezionata e deselezionarla autonomamente a livello di codice se l'utente fa clic su OK.

Come potrei farlo?

PS: so che potrei ricontrollarlo dopo se l'utente fa clic su Annulla ma ciò attiverebbe l'evento check che non desidero.

Answer 1

$("#checkboxID").on("click", function (e) { 
    var checkbox = $(this); 
    if (checkbox.is(":checked")) { 
     // do the confirmation thing here 
     e.preventDefault(); 
     return false; 
    } 
}); 

Answer 2

$("#yourCheckBoxId").on('change',function(e){ 
    e.preventDefault(); 
    $("#yourPopDiv").popup(); 
}); 

preventDefault() disabiliterà il comportamento di default del vostro input[type="checkbox"]

E sul div popup

$("#ok").on('click',function(){ 
    $("#yourCheckBoxId").attr("checked",true); 
}); 

Answer 3

Qualcosa di simile:

$("#test").on('change', function() { 
    this.checked=!this.checked?!confirm('Really uncheck this one ?'):true; 
}); 
​ 

FIDDLE

Answer 4

Pure CSS Soluzione

Selezionare Casella di controllo come -

input[type="checkbox"] { 
    pointer-events: none; 
} 

funziona abbastanza bene, e ora si può alternare la casella di controllo su ogni elemento click di vostra scelta.