Pole wyboru Jquery .prop click preventDefault behavior

Question

Ostatnio pracowałem z wieloma checkboxami. Natrafiłem na ten "problem" z wydarzeniem kliknięcia .prevenDefault() i próbowałem znaleźć rozwiązanie tego problemu. W moim przypadku chciałem móc zdecydować, czy pole wyboru może być zaznaczone/niezaznaczone zgodnie z innymi polami. Czasami musiałem nawet otworzyć okno dialogowe, zanim wydarzenie się rozpaliło. To brzmi łatwiej, niż się okazało ...

W this jsFiddle widać, na czym polega problem i jak próbowałem go rozwiązać (patrz także poniższy kod). Większość odpowiedzi sugeruje użycie zmiany zamiast kliknięcia. Ale nie możesz użyć .preventdefault().

$('div').off('change','.wtf').on('change', '.wtf', function(e) { 
    //e.preventDefault(); 
    //return false; 
    if($(this).prop('checked') == true) { 
     alert('I am true now, but I must stay false'); 
     $(this).prop('checked', false); 
    } 
    else { 
     alert('I am false now, but I must stay true'); 
     $(this).prop('checked', true); 
    } 
}); 

Czy to najlepsze rozwiązanie? A może jest jakikolwiek inny sposób, aby pole wyboru czekało dopóki nie zostanie zmieniony jego stan?

Jako przykład: Chciałbym, żeby to pole wyboru nie było zaznaczone, tylko jeśli użytkownik zaakceptuje komunikat w oknie dialogowym, naciskając "OK".

Answer 1

Checkboxes to specjalny przypadek, w którym zdarzenie change i click może zastąpić każdy inny, ponieważ change event jest również zwolniony klikając pola wyboru.

Powiedział, że jedyną dużą różnicą między click i change jest użyteczność .preventDefault(). Zdarzenie zmiany jest lepsze w przypadkach, gdy wartość pola wyboru zmienia się za pomocą innych metod niż klikanie.

W takim przypadku wybierz dowolną opcję. Przykładem może być: Fiddle here

$('input[type="checkbox"]').on('change', function() { 
    var ch = $(this), c; 
    if (ch.is(':checked')) { 
     ch.prop('checked', false); 
     c = confirm('Do you?'); 
     if (c) { 
      ch.prop('checked', true); 
     } 
    } else { 
     ch.prop('checked', true); 
     c = confirm('Are you sure?'); 
     if (c) { 
      ch.prop('checked', false); 
     } 
    } 
}); 

Answer 2

I wprowadziły Spokey rozwiązanie z pewnymi modyfikacjami podstawie zatrzymać funkcję używając return Jeśli confirm() powraca true

$("input[name='status']").change(function(e){ 
     if ($(this).is(':checked')){ 
      msg = "{{__('The set status will be Active again! Are you sure?')}}" 
      a = confirm(msg); 
      if (a){ 
       return true; 
      } 
      $(this).prop('checked',false) 
     } 
     else{ 
      msg = "{{__('The set will be Inactive! Are you sure?')}}" 
      a = confirm(msg); 
      if (a){ 
       return true; 
      } 
      $(this).prop('checked',true); 
     } 
    })