Запретить снятие флажка при нажатии (без отключения или чтения)

Я использую флажок, и я хочу, чтобы люди могли его проверить или снять. Однако, когда они снижают этот флажок, я использую всплывающее окно jQueryUI для подтверждения того, что они действительно хотят это сделать. Таким образом, они могут нажать OK или Cancel, и я хочу, чтобы мой флажок не был отмечен, только если они нажимают OK.
Вот почему я хотел бы убрать событие uncheck, чтобы предотвратить визуальный контроль флажка, и снимите его сам программно, если пользователь нажимает на OK.

Как я могу это сделать?

PS: Я знаю, что я мог бы повторно проверить его после того, как пользователь нажмет на Cancel, но это вызовет событие check, которое я не хочу.

Ответы

Ответ 1

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

Ответ 2

Что-то вроде:

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

FIDDLE

Ответ 3

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

preventDefault() отключит поведение по умолчанию вашего input[type="checkbox"]

И на вашем всплывающем div

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

Ответ 4

Чистое решение для CSS

Выберите флажок, например -

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

Работы Довольно хорошо, и теперь вы можете переключить свой флажок на любой щелчок элемента по вашему выбору.

Ответ 5

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

Ответ 6

Несложное решение...

Просто добавьте onclick = "return false;" в HTML.

Обратите внимание, что я добавил aria-disabled = "true", чтобы показать читателям экрана, что флажок снят.

Кроме того, чистое решение CSS не будет работать с переключением на флажок и проверкой его таким образом.

<label><input type="checkbox" checked="checked" aria-disabled="true" onclick="return false;">Try clicking me</label>