Fügen Sie das Attribut "Checked" auf klick JQuery hinzu

Question

Ich habe versucht herauszufinden, wie das Attribut "geprüft" zu einem Kontrollkästchen auf Klicken hinzugefügt werden kann. Der Grund, warum ich dies tun möchte, ist, wenn ich ein Kontrollkästchen abhinne. Ich kann meinen lokalen Speicher so speichern lassen, dass das Kontrollkästchen das Kontrollkästchen überprüft wird, wenn die Seite aktualisiert wird. Ab sofort, wenn ich es abhichutsche, verblasst es das Elternteil, aber wenn ich speichere und neu lade, bleibt es verblasst, aber das Kontrollkästchen ist deaktiviert.

Ich habe versucht, $ (this) zu machen ('checked'); Aber es scheint nicht überprüft zu sein.

Bearbeiten: Nach dem Lesen von Kommentaren scheint ich nicht klar zu sein. Mein Standardeingabetag lautet:

<input type="checkbox" class="done">

Ich brauche es oben, wenn ich auf das Kontrollkästchen klicke, es wird zum Ende "geprüft" hinzugefügt. Ex:

<input type="checkbox" class="done" checked>

Ich brauche es, um dies zu tun. Wenn ich das HTML auf den lokalen Speicher speichere, wird das Kontrollkästchen wie überprüft.

$(".done").live("click", function(){
if($(this).parent().find('.editor').is(':visible') ) {
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
}
if ($(this).is(':checked')) {
$(this).parent().fadeTo('slow', 0.5);
$(this).attr('checked'); //This line
}else{

$(this).parent().fadeTo('slow', 1);
$(this).removeAttr('checked');
}
});

Answer 1

Es scheint, dass dies eine der seltenen Gelegenheiten ist, in denen die Verwendung eines Attributs tatsächlich angemessen ist. JQuery's attr() Die Methode hilft Ihnen nicht, da sie in den meisten Fällen (einschließlich dieser) tatsächlich eine Eigenschaft und kein Attribut festlegt, wodurch die Wahl des Namens etwas dumm aussieht. Update: Seit JQuery 1.6.1, Die Situation hat sich leicht verändert]

IE hat einige Probleme mit dem DOM setAttribute Methode, aber in diesem Fall sollte es in Ordnung sein:

this.setAttribute("checked", "checked");

In IE wird das Kontrollkästchen immer tatsächlich überprüft. Wenn der Benutzer das Kontrollkästchen bereits überprüft und deaktiviert hat, hat das Einstellen des Attributs keinen sichtbaren Effekt. Wenn Sie also garantieren möchten, dass das Kontrollkästchen sowohl überprüft wird checked Attribut müssen Sie die festlegen checked Eigentum auch:

this.setAttribute("checked", "checked");
this.checked = true;

Um das Kontrollkästchen zu deaktivieren und das Attribut zu entfernen, machen Sie Folgendes:

this.setAttribute("checked", ""); // For IE
this.removeAttribute("checked"); // For other browsers
this.checked = false;

Answer 2

$( this ).attr( 'checked', 'checked' )

nur attr( 'checked' ) Gibt den Wert von $ (diesem) überprüftes Attribut von $ zurück. Um es festzulegen, brauchen Sie dieses zweite Argument. Bezogen auf <input type="checkbox" checked="checked" />

Bearbeiten:

Basierend auf Kommentaren wäre eine angemessenere Manipulation:

$( this ).attr( 'checked', true )

Und eine gerade JavaScript -Methode, geeigneter und effizienter:

this.checked = true;

Vielen Dank @Andy e dafür.

Answer 3

Wenn .attr() Funktioniert nicht für Sie (insbesondere beim Überprüfen und Abnehmen in Folge) .prop() Anstatt von .attr().

Answer 4

Verwenden Sie diesen Code

var sid = $(this);
sid.attr('checked','checked');