Warum wird meine Checkbox immer deaktiviert?

Question

Der folgende Code fügt dem aufrufenden Knoten ein Kontrollkästchen und eine Bezeichnung hinzu.
Meine Frage liegt in der label.click-Funktion. Wenn das Label angeklickt wird, möchte ich den Status des entsprechenden Kontrollkästchens ändern. Was jedoch passiert, ist, dass das Kontrollkästchen immer deaktiviert wird. Zum Debuggen setze ich es immer explizit auf checked.

Wenn ich durch den Code mit Firebug gehe, sehe ich, dass das Kontrollkästchen überprüft wird und dann, wenn Sie die Funktion verlassen, wird es wieder deaktiviert.

Irgendwelche Ideen?

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

Sie müssen die Standardaktion in Ihrem Label-Klick-Handler verhindern. Denke, das sollte es tun:

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

Was ist hier los ist, dass, weil Sie Ihr Etikett mit seiner nach oben gesetzt for der Checkbox bezieht die Standardaktion richtig, wenn Sie darauf klicken ist die Checkbox zu wechseln.

Obwohl, ähm, wenn das alles ist, was Sie mit Ihrem Click-Handler zu tun versuchen, könnten Sie einfach nicht einmal einen Click-Handler verwenden. Aber ich bin mir nicht sicher, ob das der Fall ist.

Answer 2

Nach zwei Nachmittagen des Suchens ich es auf SO und dann innerhalb von ein paar Minuten habe ich es selbst gefunden ..

Offenbar, wenn die ID der Checkbox einstellen, die auf dem Etikett für Attribut festlegen und dann positive Rückkehr auf die Klick-Funktion macht es irgendwie falsch. Indem ich die Click-Funktion false zurückgebe, breche ich den Zyklus, ohne mein HTML zu entwerten.

Schlusscode:

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; 
    }); 
}