JavaScript（jQuery）禁用复选框问题

好吧，所以我有点问题。我有一些代码，JS工作（至少在非CSS修改版本中），但是它会失败，并且CSS修改版本会失败。想知道是否有人可以借给我一些帮助，以弄清楚CSS的实施出了什么问题......JavaScript（jQuery）禁用复选框问题

我想要发生的是前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>

来源

2013-04-26 Witold Kowelski

你使用的是什么版本的jQuery？ – 2013-04-26 16:40:41

CSS ID不能以数字开头，因此类可以但不是ID，因此，“ '无效 – 2013-04-26 16:45:45

试试这个[code]（http://jsfiddle.net/V8qXd/4/） – adeneo 2013-04-26 16:56:36

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

在你的“奇怪”的例子中，所有的输入都是兄弟姐妹。

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

$inputs.index($this)

这将返回jQuery的输入集合$inputs内输入$this的索引。 Working fiddle。

来源

2013-04-26 16:54:16 zeroflagL

因此，如果我不使用.index（）与上述，那么什么是适当的？因为我不确定是否可以从复选框中删除标签并使CSS样式仍然有效。 – 2013-04-27 01:10:30

你可以使用'.index（）'，但不同。我已经更新了答案并提供了一个小提琴。无论如何，我建议考虑在未来的项目中分开模型和视图。那么你将不会有这样的问题在第一个地方:) – zeroflagL 2013-04-27 06:56:23

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

来源

2013-04-26 16:50:54

这并没有真正解决任何问题（这对于未来的参考来说是一件好事）。它仍然只是禁用所有**任何**复选框被选中，而不仅仅是前四个复选框这样做... – 2013-04-27 01:23:31

JavaScript（jQuery）禁用复选框问题

回答

相关问题