Использование warnDefault в событии щелчка флажка - PullRequest
Новая
       26

Использование warnDefault в событии щелчка флажка

0 голосов
/ 07 февраля 2019

У меня есть флажок, и требование состоит в том, что, когда пользователь щелкает по нему, вместо немедленного изменения его состояния, должно появиться модальное окно с вопросом «да / нет».В зависимости от их ответа, флажок должен или становиться отмеченным, или оставаться не отмеченным.

Я думал, что это требование должно быть обработано с использованием Event.preventDefault(), но когда я попытался это сделать, я обнаружил, что при выходе из обработчика события,флажок возвращается в исходное состояние, независимо от моих программных попыток установить состояние в обработчике. 

$(function() {
  $(":checkbox").click(function(e) {
    e.preventDefault();
    $(this).prop("checked", confirm("Confirm to check the checkbox"));
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="checkbox">Click me</label>
  <input type="checkbox" id="checkbox">
</form>

Так как я могу реализовать требуемое поведение?

1 Ответ

0 голосов
/ 07 февраля 2019

Проблема в том, что вы вообще позвонили preventDefault().В этом случае он вам не нужен, поскольку состояние checked полностью зависит от результата вызова confirm().

Также обратите внимание, что вы должны использовать событие change, а не click, когда имеете дело с флажками.Попробуйте это: 

$(function() {
  $(":checkbox").change(function(e) {
    $(this).prop("checked", confirm("Confirm to check the checkbox"));
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="checkbox">Click me</label>
  <input type="checkbox" id="checkbox">
</form>
...