JavaScript（jQuery）禁用复选框问题

好吧，我有点问题。我有一些代码，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);
    }
});
});

$（窗口）。加载（函数（）{
var$inputs=$（'input[type=checkbox]，$（'#test'）；
var$inputs2=$（'input[type=checkbox]，$（'test2'）；
$inputs.change（函数（）{
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（函数（）{
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 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>

请输入数据

1.
2.
3.
4.
5.
6.

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

#错误{显示：无；}
输入[type=checkbox].css复选框{display:none；}
输入[type=checkbox].css checkbox+label.css-label{左填充：20px；高度：20px；显示：内联块；行高：20px；背景重复：不重复；背景位置：0 0；字体大小：15px；垂直对齐：中间；光标：指针；}
输入[type=checkbox].css复选框：选中+label.css-label{背景位置：0-20px；}
输入[type=checkbox].css复选框：禁用+label.css-label{背景位置：0-40px；}
.css标签{背景图像：url（webtwo-style.png）；}

问题是：下面的工作正常，后面的内容后来用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>

请输入数据

1.
2.
3.
4.
5.
6首先
第二
第三
第四
第五
第六
第七
八

我会更改输入字段上的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" />

.index（）

返回与同级元素相关的索引。在您的工作示例中，

的同级是其他输入。在非工作示例中，唯一的兄弟元素是

元素

在您的“奇数”示例中，所有输入都是同级输入

为了使其正常工作，您可以使用

。索引（元素）

：

---

这将返回jquery输入集合中输入

$This

的索引

$inputs

您使用的是哪个版本的jQuery？CSS ID不能以数字开头，类可以，但不能以ID开头，因此，

无效。因此，如果我不将.index（）用于上述内容，那么什么才合适？因为我不确定是否可以从复选框中删除标签，并使CSS样式仍然有效。您可以使用

.index（）

，但方式不同。我已经更新了答案，并提供了一把小提琴。无论如何，我建议考虑在未来的项目中分离模型和视图。那么你就不会有这样的问题了：）这并不能真正解决任何问题（这是一件值得注意的事情，以备将来参考）。它仍然只是在选中任何复选框时禁用所有复选框，而不仅仅是前四个复选框这样做。。。

$inputs.index($this)