Agregue el atributo 'verificado' al hacer clic en jQuery

Question

He estado tratando de descubrir cómo agregar el atributo "verificado" a una casilla de verificación en clic. La razón por la que quiero hacer esto es, así que si verifico una casilla de verificación; Puedo hacer que mi almacenamiento local guarde eso como el HTML, por lo que cuando la página se actualiza, nota que se verifica la casilla de verificación. A partir de ahora, si lo reviso, se desvanece al padre, pero si guardo y vuelvo a cargar, permanece desvaída pero la casilla de verificación no está marcada.

He intentado hacer $ (esto) .Attr ('Checked'); Pero no parece querer agregar.

EDITAR: Después de leer comentarios, parece que no estaba siendo claro. Mi etiqueta de entrada predeterminada es:

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

Necesito que sea superior, así que cuando hago clic en la casilla de verificación, agrega "verificación" al final de eso. Ex:

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

Necesito que haga esto, así que cuando guardo el HTML en el almacenamiento local, cuando se carga, hace que la casilla de verificación se verifique.

$(".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

Parece que esta es una de las raras ocasiones en que el uso de un atributo es realmente apropiado. jQuery's attr() El método no lo ayudará porque en la mayoría de los casos (incluido esto) en realidad establece una propiedad, no un atributo, haciendo que la elección de su nombre se vea algo tonta. Actualización: desde jQuery 1.6.1, La situación ha cambiado ligeramente]

Es decir, tiene algunos problemas con el DOM setAttribute método, pero en este caso debería estar bien:

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

En IE, esto siempre hará que la casilla de verificación se verifique. En otros navegadores, si el usuario ya ha marcado y desactivado la casilla de verificación, configurar el atributo no tendrá ningún efecto visible. Por lo tanto, si desea garantizar que la casilla de verificación se verifique y tenga el checked atributo, debe establecer el checked propiedad también:

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

Para desmarcar la casilla de verificación y eliminar el atributo, haga lo siguiente:

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

Answer 2

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

sólo attr( 'checked' ) devolverá el valor de $ (este) el atributo marcado. Para establecerlo, necesitas ese segundo argumento. Residencia en <input type="checkbox" checked="checked" />

Editar:

Según los comentarios, una manipulación más apropiada sería:

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

Y un método recto de JavaScript, más apropiado y eficiente:

this.checked = true;

Gracias @Andy E para eso.

Answer 3

Si .attr() no funciona para usted (especialmente al verificar y desmarcar cajas en sucesión), use .prop() en vez de .attr().

Answer 4

Usa este código

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