我的第一个隐藏的UL设置为display：none;影响第二个UL

Question

我有两个UL部分，第一个默认情况下我设置为显示：无;并将其更改为显示：块，然后将第二个设置为显示：无;基于选择输入的变化。

在我的每个列表项中有一个复选框和一个标签标签。

由于某种原因，当第一个列表被隐藏时，任何长度下来的其他显示列表都不允许我单击复选框的标签来选择它。

所以在下面，如果我在我的CSS设置有#first {display：none;}然后我不能使用“第二个选项1”的标签来选中它的复选框。复选框本身仍按预期运行。

我试过对标签应用z-index，但它似乎没有任何影响。我还没有尝试在负面位置移动列表，但只是好奇，如果我必须处理它，或者如果我失去了一些东西。

显然，与其他标记相比，下面的源代码是最小的，因此它可能完全与影响它的另一部分相关。

浏览器是IE9。

<div id="barcodes"> 
<ul id="first"> 
    <li> 
     <input type="checkbox" name="1" id="1" /> 
     <label for="1">First Option 1</label> 
    </li> 
</ul> 
<ul id="second"> 
    <li> 
     <input type="checkbox" name="1" id="1" /> 
     <label for="1">Second Option 1</label> 
    </li> 
    <li> 
     <input type="checkbox" name="2" id="2" /> 
     <label for="2">Second Option 2</label> 
    </li> 
</ul> 
</div> 

• 编辑以反映我实际的代码我是有问题的。

Answer 1

对不起，我发现通过问题的，我下面检查出两个小提琴选项来。带领我朝着正确的方向前进。

问题实际上与我在上面的标记中没有的ID标记相关。

<input type="checkbox" name="1" id="1" /> 

我实际上在我的页面中有以下标记。

http://jsfiddle.net/mAGf4/

我忘了我复制另一个列表并提出补充的子部分。

Answer 2

DEMO

#first :first-child { 
    display:none; 
} 

Answer 3

你缺少的复选框类型"这可能会导致这个烂摊子。

作品：http://jsbin.com/dolegada/1/edit