toggleClass sur l'étiquette, désactiver jusqu'à ce que non cliqué

Question

J'ai quelques cases à cocher qui lorsque vous cliquez sur désactiver toutes les autres cases jusqu'à ce que vous décochez la case. Cela fonctionne très bien. Mais je veux aussi incorporer un toggleClass 'actif' sur les étiquettes. Par conséquent, lorsque vous cliquez sur une étiquette, elle ajoute une classe active.

Mais si vous cliquez sur une autre étiquette, elle n'ajoute pas de classe active tant que vous n'avez pas désélectionné la classe de l'étiquette précédemment cliquée. Désolé si cela semble un peu confus.

je les js travaillant pour la partie ici: cases à cocher

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

et j'ai le toggleClass pour le label

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

Mais ils ont besoin d'une certaine manière de travailler ensemble. Vous obtiendrez une meilleure idée en vérifiant ce violon http://jsfiddle.net/CHQsR/327/

par exemple. si vous avez cliqué sur 'Label1', c'est correct (le texte est en gras et la case à cocher est cochée). Mais si vous cliquez sur 'Label2' qui devrait ajouter la classe 'active' (et aller gras) jusqu'à ce que vous décocher 'Label1'

Merci

Answer 1

Jetez un oeil à la version fixe: 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;} 

En fait, vous shoud souciaient pas de cliquer sur les étiquettes, car ils câblés avec des cases à cocher correspondant par for attribuiez. Lors de la modification de la case à cocher, avec les cases à cocher de désactivation/activation, vous devez basculer la classe sur l'étiquette correspondante.

De même, vous ne devez pas inclure de symbole de hachage dans les balises d'identification. Hash utilisé dans les sélecteurs, lorsque vous voulez sélectionner par ID, c'est-à-dire <div id="mydiv"> et le sélecteur pour sélectionner ce div est #mydiv, que vous pouvez utiliser comme $('#mydiv').