In my div, I have several checkboxes placed under labels for formatting purposes. There is a list of checkbox names that need to be checked upon certain actions. Here is the list: var columns= ['2','5','4']
This is the current HTML structure:
<div id="menu" class="dropdown-menu hold-on-click dropdown-checkboxes pull-right">
<label><input type="checkbox" id="cbox0" data-column="0" name='1'>1</label>
<label><input type="checkbox" id="cbox0" data-column="0" name='2'>2</label>
<label><input type="checkbox" id="cbox0" data-column="0" name='3'>3</label>
<label><input type="checkbox" id="cbox0" data-column="0" name='4'>4</label>
<label><input type="checkbox" id="cbox0" data-column="0" name='5'>5</label>
<label><input type="checkbox" id="cbox0" data-column="0" name='6'>6</label>
</div>
The code works in IE and Firefox, but not in Chrome. Any suggestions for an alternative approach or fixing the bug?
$('input', $('#menu')).each(function () {
var chkBoxName = $(this).attr('name');
var selected = columns.indexOf(chkBoxName);
if(selected !== -1){
$(this).prop('checked', 'checked');
console.log(chkBoxName + $(this).attr('checked'));
}
});
I found this JSFiddle that works in IE but not in Chrome. The issue seems to relate to checkboxes being nested within tables in some cases. Not sure how to resolve it on my end.
This is the problem I encountered with Chrome version 34: