jeudi 7 février 2019

Using preventDefault in checkbox click event

I have a checkbox and the requirement is that when the user clicks it, instead of immediately changing its state, a modal window should pop up asking them a yes/no question. Depending on their answer, the checkbox should either become checked or remain unchecked.

I thought that this requirement should be handled using Event.preventDefault() but when I tried to do it I discovered that when I exit the event handler, the checkbox is reverted to its original state, regardless of my programmatic attempts to set the state in the handler.

$(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>

So how can I implement the required behavior?




Aucun commentaire:

Enregistrer un commentaire