webentwicklung-frage-antwort-db.com.de

Verhindern, dass das Kontrollkästchen deaktiviert wird, wenn es angeklickt wird (ohne Deaktivierung oder Readonly)

Ich verwende ein Kontrollkästchen und möchte, dass die Benutzer es aktivieren/deaktivieren können. Wenn sie das Häkchen entfernen, verwende ich ein modales jQueryUI-Popup, um zu bestätigen, dass sie das wirklich wollen. So können sie klicken OK oder Cancel, und ich möchte, dass mein Kontrollkästchen nur dann deaktiviert wird, wenn sie klicken OK.
Deshalb möchte ich das Deaktivierungsereignis abfangen, um zu verhindern, dass das Kontrollkästchen visuell deaktiviert wird, und es selbst programmgesteuert deaktivieren, wenn der Benutzer gerade auf klickt OK.

Wie könnte ich das machen?

PS: Ich weiß, dass ich es nach einem Klick erneut überprüfen kann Cancel aber das würde das Ereignis check auslösen, das ich nicht möchte.

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

So etwas wie:

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

GEIGE

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

preventDefault() deaktiviert das Standardverhalten Ihres input[type="checkbox"]

Und auf Ihrem Popup div

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

Wie wäre es mit der deaktivierten HTML-Eigenschaft?

<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>

Verknüpfung:

https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/disabled

0
Julian
   $("#checkboxID").click(function(e) { 
      var checkbox = $(this);
      if (checkbox.is(":checked")) {
       //check it 
      } else {
       // prevent from being unchecked
        this.checked=!this.checked;
      }
   });
0
Yaw shadi

Reine CSS-Lösung

Aktivieren Sie das Kontrollkästchen wie - 

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

Funktioniert ziemlich gut und jetzt können Sie Ihr Kontrollkästchen bei jedem Element-Klick Ihrer Wahl umschalten. 

0
Pranjal jaju