我的第一個隱藏的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