Eddie Eddie - 1 month ago 6
jQuery Question

jQuery stop row click to enable checkbox from working if select is clicked

I'm using the following to toggle a checkbox inside a row when the row is clicked:

jQuery(document).ready(function(){
jQuery(".et-row").on('click',function(){
vartheinputs=jQuery(this).find('input');
if(jQuery(vartheinputs).is(":checked")){
jQuery(vartheinputs).prop("checked",false).trigger("change");
}
else{
jQuery(vartheinputs).prop("checked",true).trigger("change");
}
});
});


It's working well but I need to exclude some things inside of the row from toggling the checkbox. If I have:

<select class="qty">
<option>Option</option>
<option>Option</option>
</select>


Inside of a table row, how can I stop it from toggling the checkbox?

Answer

On the elements that should not trigger the row's click, stop the event from propagating, with jQuery you can use https://api.jquery.com/event.stoppropagation/ so to stop your select from triggering your row's click you can do:

$("select.qty").on('click', function(event) {
    event.stopPropagation();
});