使用jquery选择div中的复选框不能在chrome中工作，而是在IE和firefox中工作

Question

我checkboxes内的div很少。所有这些checkboxes都放在label下，用于格式化问题。我有一个列表，其中包含复选框和名称的复选框。这些checboxes必须检查一些动作。以下是列表：var columns= ['2','5','4']

这就是HTML的外观：

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

以下代码适用于IE和Firefox，但不适用于Chrome。如果我可以修复此代码中的错误，请提供不同的代码或告诉我。

$('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'));
              }
            });

我看到这个fiddle它在IE中运行良好但在chrome中运行不正常。我想我遇到了同样的问题。原因是在这种情况下第二个复选框在表下。我不确定我的问题是什么。

这是chrome 34中发生的事情

Answer 1

首先，您的HTML存在问题：

• 您的所有chackebox都具有相同的ID

• 您的标签不得包含输入

  <label for="cbox1">1</label>
  <input type="checkbox" id="cbox1" data-column="1" name="1">
  

您的代码适合我： http://jsfiddle.net/Lw9k9zd4/

Answer 2

 <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="cbox1" data-column="0" name = '2'>2</label>
       <label><input type="checkbox" id="cbox2" data-column="0" name = '3'>3</label>
       <label><input type="checkbox" id="cbox3" data-column="0" name = '4'>4</label>
       <label><input type="checkbox" id="cbox4" data-column="0" name = '5'>5</label>
       <label><input type="checkbox" id="cbox5" data-column="0" name = '6'>6</label>
    </div>
    <script>
    $(document).ready(function(e) {
        $("#menu input").each(function(index, element) {
             $(this).prop('checked', 'checked');
        });

    });