jQuery Checkbox Event Handler Ошибка

Question

Я недавно обнаружил проблему, о которой я не могу понять, что касается обработки событий jQuery и checkbox.

Что должно случиться:

• Нажмите коробчатого изображение Thats, связанные с определенным флажком.
• Когда полевое изображение отмечено как отмечено (обозначается добавлением класса .checked и отображает индикатор галочки верхнего правого угла), необходимо также установить соответствующий флажок .

Когда я многократно/быстро нажимаю на серые квадратные изображения, вы увидите эту ошибку. Поведение по умолчанию (переключает проверенный атрибут) появляется случайным образом после того, как обработчики событий срабатывают. В результате это приводит к тому, что связанное выбранное поле-образ и флажок случайным образом несинхронизируются друг с другом, тем самым давая неточные данные.

Пожалуйста, просмотрите этот пример и ошибка в действии, перейдя в https://jsfiddle.net/coreyds/5wLk2rge/4/

У вас есть решение, чтобы решить эту проблему, либо в JQuery или простой JavaScript?

Вот код в вопросе:

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; 
} 

Answer 1

Для лучшей работы связывают "label - input" пара нужно использовать "for="someId" - id="someId" пара. Ваша ошибка заключалась в проверке click на .sa-checkbox-img блоке, что внутри этикетки, когда вам нужно проверить click на .sa-checkbox. Поскольку все время, когда вы нажимаете на какую-либо внутреннюю метку, связанную с флажком, активировали событие click в этом флажке, но установите флажок, не активированный на этикетке click.

working example

Успехов!

Answer 2

Wow это ошибка была жесткая один взломать, пока я не понял, что небольшая ошибка в коде! Я понятия не имел, что происходит, но я, наконец, решил. Вы можете найти решение here. Я также смог сконденсировать вашу логику. Основное изменение было элементом метки. Вы забыли атрибут!

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