CODEWITHSUNDEEP
javascriptjquerycheckboxclickpreventdefault
Ron Inbar
Ron Inbar

Reputation: 2234

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?

Upvotes: 1

Views: 2108

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

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>

Upvotes: 3

Related Questions