jQuery Checkbox Event Handler Bug

Question

I have recently discovered an issue that I can't seem to figure out regarding jQuery and checkbox event handling.

What should happen is:

Click a box-image thats associated with a specific checkbox.
When the box-image is marked as checked (denoted by adding a class of .checked and displaying top right corner checkmark indicator) the associated checkbox should also be checked.

When I repeatedly/quickly click on the gray box-image tiles you'll see the bug in question. The default behavior (toggling the checked attribute) appears to randomly take place after the event handlers fire. As a result this cause the associated selected box-image and checkbox to randomly unsync with one another, thereby giving inaccurate data.

Please view this example and bug in action by going to https://jsfiddle.net/coreyds/5wLk2rge/4/

Do you have a solution to fix this problem either in jQuery or plain JavaScript?

Here is the code in question:

HTML:

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <div class="form-group hwl-inline-checkbox-group">
            <label class="checkbox-inline">
                <div id="sa-checkbox-img1" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-briefcase fa-3x"></i>
                    <label class="icon-img-label">WORK</label>
                </div>
                <input type="checkbox" id="imgCheck1" name="surrounding_area" class="sa-checkbox" value="work" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img2" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-building fa-3x"></i>
                    <label class="icon-img-label">SCHOOL</label>
                </div>
                <input type="checkbox" id="imgCheck2" name="surrounding_area" class="sa-checkbox" value="school" />
            </label>

            <label class="checkbox-inline">
                <div id="sa-checkbox-img3" class="sa-checkbox-img">
                    <i class="fa fa-check"></i>
                    <i class="fa fa-meh-o fa-3x"></i>
                    <label class="icon-img-label">NO PREFERENCE</label>
                </div>
                <input type="checkbox" id="imgCheck3" name="surrounding_area" class="sa-checkbox" value="no preference" />
            </label>
        </div>

    </div>
</div>
<!-- end .row -->

jQuery

$('.sa-checkbox-img').click(function(){
    var $this = $(this),
        sa_checkbox = $this.find($('.sa-checkbox'));

    if( !$this.hasClass('checked')){
        $this.addClass('checked');
        sa_checkbox.prop('checked', true);
    } else {
        $this.removeClass('checked');
        sa_checkbox.prop('checked', false);
    }
});

CSS

.container,
.row {
    margin-top: 20px;
}

h5 {
    text-align: center;
}

.sa-checkbox-img {
  color: #999;
  border: 5px solid #999;
  padding: 10px 25px;
  text-align: center;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-transition-duration: 250ms;
  -o-transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  transition-duration: 250ms;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
}

.sa-checkbox-img label.icon-img-label {
  display: block;
}

.sa-checkbox-img i.fa.fa-check {
  display: none;
  color: white;
}

.sa-checkbox-img:hover {
  border-color: #009fd4;
  color: #009fd4;
  cursor: default;
}

.sa-checkbox-img.checked {
  border-color: #009fd4;
  color: #009fd4;
  cursor: default;
}

.sa-checkbox-img.checked i.fa.fa-check {
  display: block;
  background: #009fd4;
  position: absolute;
  top: -5px;
  right: -5px;
  color: white;
  padding: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

I made a change to my answer after realizing the real issue with your code. I hope my solution was able to help you! — Stephan Genyk
– Stephan Genyk, Commented Sep 11, 2015 at 18:28

Andriy_K · Accepted Answer · 2015-09-14 07:10:49Z

1

For better work of bind "label-input" pair need use "for="someId"-id="someId" pair. Your mistake has been in checking click on .sa-checkbox-img block that inside label when you need checking click on .sa-checkbox. Because all time when you click on some inside label binded with checkbox triggered click event on this checkbox, but click on the checkbox don't triggered click on the label.

working example

Good luck!

edited Sep 14, 2015 at 7:10

answered Sep 11, 2015 at 20:24

Andriy_K

563 bronze badges

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

4 Comments

Andriy_K Over a year ago

best solution is using pair id-for in input and label

Corey Over a year ago

Hi Andyriy, thanks for the response but please don't respond without adding code or defining a solution a solution to the problem. To be honest your response is somewhat confusing, as I can't seem to understand what you're trying to say. Please include code as this will help clarify what you're trying to point out. Also I'm using bootstrap for the CSS, which is why the HTML is structured the way that it is and on top of that, this is simply a prototype demo that I was working on – meaning I'm not necessarily concerned that the HTML's structure is not 100% semantic.

Andriy_K Over a year ago

Look on my answer. I'm update it and add working code.

Corey Over a year ago

Hey Anyriy, your solution appears to work correctly. I have marked it as being the correct answer. Thanks for the help! Cheers

Stephan Genyk · Accepted Answer · 2015-09-11 18:28:42Z

0

Wow this bug was a tough one to crack until I realized the small bug in your code! I had no idea what was going on, but I finally solved it. You can find the solution here. I was also able to condense your logic as well. The main change was the label element. You forgot the for attribute!

<label for="imgCheck1" class="icon-img-label">SCHOOL</label>

edited Sep 11, 2015 at 18:28

answered Sep 11, 2015 at 18:23

Stephan Genyk

1871 silver badge7 bronze badges

2 Comments

Corey Over a year ago

Hey Stephan, thanks for your help unfortunately the bug still appears to happen in your script... when I click on the "No Preference" image box – it's associated checkbox still appears to experience the bug wherein it eventually becomes unsynced with it's associated image box.

Stephan Genyk Over a year ago

Hey Corey. Are you looking at the right version? The link should be jsfiddle.net/5wLk2rge/12. It is working alright with me. Except I noticed that if you click on the checkbox and then the image associated with it, it will be unsynced, but that is an easy fix that I am sure you know what to do.

Collectives™ on Stack Overflow

jQuery Checkbox Event Handler Bug

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related