JavaScript（jQuery）禁用複選框問題

Question

好吧，所以我有點問題。我有一些代碼，JS工作（至少在非CSS修改版本中），但是它會失敗，並且CSS修改版本會失敗。想知道是否有人可以借給我一些幫助，以弄清楚CSS的實施出了什麼問題......

我想要發生的是前4個盒子中的任何一個，如果選中，禁用所有其他盒子。但是，如果其他複選框（數字5及以上）被選中，則不會禁用任何複選框（除非有人檢查前四個中的一個）。

我的javascript：

<script type="text/javascript"> 
$(window).load(function(){ 
var $inputs = $('input[type=checkbox]', $('#test')); 
var $inputs2 = $('input[type=checkbox]', $('#test2')); 
$inputs.change(function(){ 
    var $this = $(this);  
    $inputs.not(this).prop('disabled',($this.index() < 4 && this.checked));   
    if($this.index() < 4 && this.checked){ 
     $inputs.not(this).prop('checked',false); 
    } 
}); 
$inputs2.change(function(){ 
    var $this = $(this);  
    $inputs2.not(this).prop('disabled',($this.index() < 4 && this.checked));   
    if($this.index() < 4 && this.checked){ 
     $inputs2.not(this).prop('checked',false); 
    } 
}); 
}); 

第一個div：

<div id="test" style="float:left; width:50%"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr><td style="font-size:3px">&nbsp;</td></tr> 
    <tr> 
    <p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr> 
     <td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" /> 
     <label for="1" class="css-label">1</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" /> 
     <label for="2" class="css-label">2</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" /> 
     <label for="3" class="css-label">3</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" /> 
     <label for="4" class="css-label">4</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" /> 
     <label for="5" class="css-label">5</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" /> 
     <label for="6" class="css-label">6</label></td></tr> 
    </table> 
</div> 

我的CSS，如果需要的話：

<style> 
#Error {display: none;} 
input[type=checkbox].css-checkbox {display:none;} 
input[type=checkbox].css-checkbox + label.css-label {padding-left:20px;height:20px;display:inline-block;line-height:20px;background-repeat:no-repeat;background-position: 0 0;font-size:15px;vertical-align:middle;cursor:pointer;} 
input[type=checkbox].css-checkbox:checked + label.css-label {background-position: 0 -20px;} 
input[type=checkbox].css-checkbox:disabled + label.css-label {background-position: 0 -40px;} 
.css-label{ background-image:url(web-two-style.png);} 
</style> 

的問題是：下面的作品，其次爲後來用CSS修改，我無法弄清楚出了什麼問題。

什麼工作：

<div id='test'> 
    <input type="checkbox" name="check1" value="1" id="check1" >first 
    <input type="checkbox" name="check2" value="1" id="check2" >second 
    <input type="checkbox" name="check3" value="1" id="check3" >third 
    <input type="checkbox" name="check4" value="1" id="check4" >fourth 
    <input type="checkbox" name="check5" value="1" id="check5" >fifth 
    <input type="checkbox" name="check6" value="1" id="check6" >sixth 
    <input type="checkbox" name="check7" value="1" id="check7" >seventh 
    <input type="checkbox" name="check8" value="1" id="check8" >eight 
</div> 

當我再補充一點努力同一div爲不一個代碼，因爲它上面的非CSS然後正常工作，並會禁止它變得更奇怪（如適用）所有複選框無論CSS，但是當CSS被選中，所有被禁用：

<div id="test" style="float:left; width:50%"> 
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr><td style="font-size:3px">&nbsp;</td></tr> 
    <tr> 
    <p id="Error" style="background: #ff0000; color: #fff;">Please, enter data</p></tr> 
     <td width="150px"><input type="checkbox" id="1" name="1" class="css-checkbox" value="1" /> 
     <label for="1" class="css-label">1</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="2" name="2" class="css-checkbox" value="2" /> 
     <label for="2" class="css-label">2</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="3" name="3" class="css-checkbox" value="3" /> 
     <label for="3" class="css-label">3</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="4" name="4" class="css-checkbox" value="4" /> 
     <label for="4" class="css-label">4</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="5" name="5" class="css-checkbox" value="5" /> 
     <label for="5" class="css-label">5</label></td></tr><tr> 
     <td width="150px"><input type="checkbox" id="6" name="6" class="css-checkbox" value="6" /> 
     <label for="6" class="css-label">6</label></td></tr>  <input type="checkbox" name="check1" value="1" id="check1" >first 
    <input type="checkbox" name="check2" value="1" id="check2" >second 
    <input type="checkbox" name="check3" value="1" id="check3" >third 
    <input type="checkbox" name="check4" value="1" id="check4" >fourth 
    <input type="checkbox" name="check5" value="1" id="check5" >fifth 
    <input type="checkbox" name="check6" value="1" id="check6" >sixth 
    <input type="checkbox" name="check7" value="1" id="check7" >seventh 
    <input type="checkbox" name="check8" value="1" id="check8" >eight 
    </table> 
</div> 

Answer 1

.index()相對同級元素索引返回的東西。在你的工作示例中，<input>的兄弟姐妹是其他輸入。在您的非工作示例中，唯一的兄弟是<label>元素。

在你的「奇怪」的例子中，所有的輸入都是兄弟姐妹。

爲了使反正它的工作，你可以使用.index(element)：

$inputs.index($this) 

這將返回jQuery的輸入集合$inputs內輸入$this的索引。 Working fiddle。

Answer 2

我會改變你的輸入字段的ID，ID的不能以數字

啓動

<input type="checkbox" id="5" name="5" class="css-checkbox" value="5" /> 

可能會導致您的JS問題。我會嘗試像

<input type="checkbox" id="field-5" name="5" class="css-checkbox" value="5" />