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 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> 的 sibling 是其他输入。在您的非工作示例中，唯一的兄弟是 <label>元素。

在您的“奇数”示例中，所有输入再次成为 sibling 。

为了让它正常工作，您可以使用 .index(element) :

$inputs.index($this)

这将返回输入的索引 $this在 jquery 输入集合中 $inputs . Working fiddle .