Chrome and IE doesn't fire change event on time when we click on label assigned for checkbox

Question

On a specific condition when user checks a checkbox, I want to show an alert message and uncheck the checkbox, so to uncheck a checkbox I am calling click function on it so that it internally unchecks and also fire necessary events.

I have a checkbox and label which is for checkbox, with for property properly set for the label

In firefox, unchecking works on checkbox and it's label.
In chrome, unchecking works on checkbox for but not on label.
In chrome, unchecking doesn't work on checkbox or label.

With specific timeout I was able to solve this problem, but I want a solution without using timeout.

You can see code below and also access jsfiddle here.

$("#id1").on("change", function(event) {
  if (event.target.checked) {
    $(event.target).trigger("click");
  }
});

$("#id2").on("change", function(event) {
  setTimeout(function() {
    if (event.target.checked) {
      $(event.target).trigger("click");
    }
  }, 5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" value="" id="id1">
<label for="id1">Click me</label>
<br/>
<input type="checkbox" value="" id="id2">
<label for="id2">Works with timeout</label>

This work quite well with Firefox but not in chrome and IE9, IE10

I am looking for javascript or jQuery solution

@epascarello : I have a boxes and inside it I am having checkbox, I am allowing user to select only one type of boxes so if user tries to select other types of boxes then I show alert message and uncheck it, ... Why I want to fire click event is because, I am also highlight-de-highlight box when checkbox is checked. — Parag Bhayani, Jul 07 '16 at 12:23

Lorenzo · Accepted Answer · 2016-07-07T12:11:39.033

2

try this:

$("#id1").change(function(event) {
  if (this.checked) {
    this.checked = false;
  }
});

i've tried in chrome and it seems to work, basically instead of click the checkbox it modifies it's state

jsfiddle

updated jsfiddle triggering click event

edited Jul 07 '16 at 12:11

answered Jul 07 '16 at 12:05

Lorenzo

288
5
17

but it isn't going to fire a click event on checkbox to uncheck it, so my other changes that depends on javascript uncheck event, breaks – Parag Bhayani Jul 07 '16 at 12:07
i've added an updated jsfiddle triggering click event – Lorenzo Jul 07 '16 at 12:12
it fires a click event, https://jsfiddle.net/yL5bxepp/6/, if you look for a click event attaching a listener to a change event maybe the problem is elsewhere... 'change' and 'click' are different events. in the first comment you said you need a click event, then you said you need a change event, which one do you need? – Lorenzo Jul 07 '16 at 12:19
I need change event – Parag Bhayani Jul 07 '16 at 12:24
but then change event will be fired two times in FF right? basically I want to avoid browser specific code – Parag Bhayani Jul 07 '16 at 12:25
So your basic idea is to set checkbox state differently and firing event differently, right? – Parag Bhayani Jul 07 '16 at 12:31
your question is unclear, maybe i understood what you need, look at http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group – Lorenzo Jul 07 '16 at 12:37
no, not like that... there are many checkbox with two different types, so at a time I can select only one type of checkboxes... – Parag Bhayani Jul 07 '16 at 12:44
what do you mean with "type of checkbox"? maybe you are using checkboxes likes radio buttons? however i've answered your question, you are just asking other things in comments, i won't reply again – Lorenzo Jul 07 '16 at 12:52
Nevermind, @lorenzo I am able to pickup from your answer and my issue is solved, thanks a lot for your help and time – Parag Bhayani Jul 07 '16 at 15:09

Chrome and IE doesn't fire change event on time when we click on label assigned for checkbox

1 Answers1