Using preventDefault in checkbox click event

Question

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?

Rory McCrossan · Accepted Answer · 2019-02-07 14:42:14Z

3

The problem is because you called preventDefault() at all. You don't need it in this case as the checked state is entirely dependant on the outcome of the confirm() call.

Also note that you should use the change event, not click, when dealing with checkboxes. Try this:

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

answered Feb 7, 2019 at 14:42

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using preventDefault in checkbox click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related