toggleClass标签上，禁用，直到未点击

Question

我有一些复选框，当你点击禁用所有其他复选框，直到你不勾选复选框。这很好。但我也想在标签上加入一个toggleClass'active'。

所以当你点击一个标签时，它会添加活动类。但是，如果您单击另一个标签，则不会添加课程活动，直到您将该课程从以前点击的标签上取消切换为止。对不起，如果这听起来有点混乱。

我对复选框部分在这里工作的JS：

$('.test').change(function(){ 
if($('input.test').filter(':checked').length == 1) 
    $('input.test:not(:checked)').attr('disabled', 'disabled'); 
else 
    $('input.test').removeAttr('disabled'); 
}); 

和我有toggleClass为标签

$('.holder label').click(function() { 
    $('.holder label').not(this).removeClass('active') 
    $(this).toggleClass('active') 
}) 

但它们在某种程度上需要共同努力。通过查看这个小提琴，你会得到一个更好的主意http://jsfiddle.net/CHQsR/327/

例如，如果您点击了“Label1”，则其正确（文本变为粗体并勾选复选框）。但是，如果你点击“Label2的”应增加“活跃”类（去粗），直至取消选中“Label1的”

感谢

Answer 1

看看固定的版本：http://jsfiddle.net/maestrow/uqy77q98/3/

HTML：

<div class="holder"> 
    <label for="checkone">Label1</label> 
    <input type="checkbox" class="test" id="checkone" /> 
</div> 

<div class="holder"> 
    <label for="checktwo">Label2</label> 
    <input type="checkbox" class="test" id="checktwo" /> 
</div> 

<div class="holder"> 
    <label for="checkthree">Label3</label> 
    <input type="checkbox" class="test" id="checkthree" /> 
</div> 

的Javascript：

$('.test').change(function(){ 
    if($('input.test').filter(':checked').length == 1) 
    $('input.test:not(:checked)').attr('disabled', 'disabled'); 
    else 
    $('input.test').removeAttr('disabled'); 

    var id = $(this).attr('id'); 
    $('label[for='+id+']').toggleClass('active'); 
}); 

的CSS：

.active{font-weight:bold;} 

其实你不用在点击标签，因为他们通过for atrribute与相应的复选框连接。在复选框更改时，除禁用/启用休息复选框外，您应该在相应的标签上切换类。

此外，你不应该在id标签中包含散列符号。在选择器中使用散列时，如果要按ID选择，即：<div id="mydiv">和用于选择此div的选择器是#mydiv，您可以将其用作$('#mydiv')。