Pourquoi la case à cocher est-elle toujours décochée?

Question

Le code suivant ajoute une case à cocher et une étiquette au nœud appelant.
Ma question se trouve dans la fonction label.click. Chaque fois que l'on clique sur l'étiquette, je veux changer l'état de la case correspondante. Qu'est-ce qui se passe cependant, c'est que la case à cocher se termine toujours non cochée. Pour le débogage, je le mets maintenant explicitement à coché. Lorsque je parcours le code avec firebug, je vois que la case à cocher est vérifiée et ensuite, quand on quitte la fonction, elle est à nouveau décochée.

Des idées?

jQuery.fn.AddEndOrStartWith = function(selected, id, action) { 
    var checkBox = $('<input type="checkbox"></input>'); 
    checkBox.attr("id", id + action); 
    checkBox.addClass(action + "CheckBox"); 
    checkBox.attr("for", id); 

    var label = $('<label></label>'); 
    label.attr("for", id + action); 

    if (selected) { 
     checkBox.attr("checked", "checked"); 
     label.addClass("lockerClosed"); 
    } else { 
     label.addClass("lockerOpen"); 
    } 

    $(this).append(label); 
    $(this).append(checkBox); 

    label.click(function() { 
     /*alert(checkBox.attr("checked"));*/ 
     checkBox.attr("checked", "checked"); 
     /*return true;*/ 
     /*alert(checkBox.attr("checked"));*/ 
    }); 
} 

Answer 1

Vous devez empêcher l'action par défaut dans votre gestionnaire de clic d'étiquette. Pense que cela devrait le faire:

label.click(function() { 
    checkBox.attr("checked", "checked"); 
    return false; 
}); 

Qu'est-ce qui se passe est que parce que votre étiquette est mis en place avec sa for se référant à la case à cocher correctement, l'action par défaut en cliquant sur c'est pour activer la case à cocher. Bien que, si c'est tout ce que vous essayez de faire avec votre gestionnaire de clic, je suppose que vous ne pourriez même pas utiliser un gestionnaire de clic. Mais je ne suis pas sûr que ce soit le cas.

Answer 2

Après deux après-midi de je l'ai mis sur la recherche SO puis en quelques minutes, je me suis trouvé .. il

Apparemment, lors de la configuration de l'ID de la case à cocher, en réglant l'attribut sur l'étiquette, puis retour positif sur la fonction de clic le rend en quelque sorte faux. En rendant la fonction click return false, je casse le cycle sans invalider mon HTML.

Code final:

jQuery.fn.AddEndOrStartWith = function(selected, id, action) { 
    var checkBox = $('<input type="checkbox"></input>'); 
    checkBox.attr("id", id + action); 
    checkBox.addClass(action + "CheckBox"); 

    var label = $('<label></label>'); 
    label.attr("for", id + action); 

    if (selected) { 
     checkBox.attr("checked", "checked"); 
     label.addClass("lockerClosed"); 
    } else { 
     label.addClass("lockerOpen"); 
    } 

    $(this).append(label); 
    $(this).append(checkBox); 

    label.click(function() { 
     checkBox.attr("checked", !checkBox.attr("checked")); 
     return false; 
    }); 
}