0

My goal here is to control whether or not a checkbox can be checked or unchecked based on a number of variables. If I can't stop the default behavior of clicking the checkbox then I can't achieve that goal.

For starters, when my user clicks on a checkbox, I want to get what it's checked/unchecked status was prior to being clicked so that I can run some if statements. Here is the code I am using.

$( "body" ).on( "click", "input", function(event) {

  event.preventDefault();

  if ( $(this).prop('checked') ) {
    alert("true");
  }
  else {
    alert("false");
  };

});

And here is the demo on codepen: http://codepen.io/jimmykup/pen/lAmzy

When I click on the unchecked input, the checkbox is checked and I get an alert that says checked = true. But this should be false as the checkbox was empty prior to me clicking on it. I clear the alert and the checkbox goes back to being empty. As I understand it, event.preventDefault(); should stop the checkbox from being checked at all. But that doesn't seem to be what is happening. What am I missing?

Following that, once I have the pre-click value, I want to check or uncheck the input based on some if statements. Do I need to use event.preventDefault(); on mousedown, mouseup and click in order to do this? If so, is there an efficient way of covering all three?

2
  • I believe the mousedown event occurs before the checked property is set and the click event fires afterwards
    – kevmc
    Aug 4, 2014 at 1:46
  • Thanks @kevmc. I used that and it worked. However, mouseup and click still affect the checkbox afterwards. It seems I have prevent the default action of all three in order to get this to work.
    – jkupczak
    Aug 4, 2014 at 2:19

2 Answers 2

3

Did you try a mousedown event instead of a click?

4
  • I thought it worked for a second. But I've come to realize that if my mouse stays hovered over the input when I mouseup, the checkbox will get checked even if I set it to false in my code. codepen.io/jimmykup/pen/Csckh
    – jkupczak
    Aug 4, 2014 at 2:01
  • I added event.stopPropagation() into your code. Is this behaving how you want it to behave? codepen.io/johnlonganecker/pen/beELJ Aug 4, 2014 at 2:08
  • That didn't work either. My goal here is to stop the browser from checking or unchecking the box under all circumstances. I need to run some if statements to decide if the box can be checked/unchecked. And that doesn't work when the browser keeps getting involved.
    – jkupczak
    Aug 4, 2014 at 2:18
  • This seems ugly to me, but should do the trick. codepen.io/jimmykup/pen/Csckh Aug 4, 2014 at 2:36
2

DEMO

You have to use mousedown event so it read the value of the checkbox without activating click. then you could just trigger the click of the element using .trigger()

$( "body" ).on( "mousedown", "input", function(event) {


  if ( $(this).prop('checked') ) {
    alert("true");
  }
  else {
    alert("false");
  };

  $(this).trigger("click");
});
7
  • Wouldn't you need to use .val to store the value? Aug 4, 2014 at 1:49
  • @EternalHour the OP knows that the alert() part of the code can be altered into getting the value of the element.
    – Yaje
    Aug 4, 2014 at 1:50
  • I thought it worked for a second. But I've come to realize that if my mouse stays hovered over the input when I mouseup, the checkbox will get checked even if I set it to false in my code. codepen.io/jimmykup/pen/Csckh
    – jkupczak
    Aug 4, 2014 at 2:01
  • @jimmykup and why would you do that?
    – Yaje
    Aug 4, 2014 at 2:10
  • 1
    you should've stated your goal entirely on your question.
    – Yaje
    Aug 4, 2014 at 2:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.