Prevent checkbox from unchecking when clicked (without disable or readonly)

问题

I'm using a checkbox and I want people to be able to check/uncheck it. However, when they uncheck it, I'm using a jQueryUI modal popup to confirm that they really want to do that. Thus they can click OK or Cancel, and I want my checkbox to be unchecked only if they click OK.
That's why I would like to catch the uncheck event to prevent the checkbox from being visually unchecked, and uncheck it myself programmatically if the user happens to click on OK.

How could I do that ?

PS: I know I could re-check it after if the user clicks on Cancel but that would trigger the check event which I do not want.

回答1:

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

回答2:

Something like:

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

FIDDLE

回答3:

Pure CSS Solution

Select Checkbox like -

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

Works Pretty well, and now you can toggle your checkbox on any element click of your choice.

回答4:

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

回答5:

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

preventDefault() will disable default behavior of your input[type="checkbox"]

And on your popup div

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

回答6:

How about using the HTML disabled property?

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

Link:

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

来源：https://stackoverflow.com/questions/12138821/prevent-checkbox-from-unchecking-when-clicked-without-disable-or-readonly

标签

javascript

jquery

events

checkbox