javascript - true - jquery attr(''checked'', ''checked'') funciona solo una vez

prop checked

Question

Tengo un problema para encontrar el motivo del siguiente comportamiento de jquery / checkbox.

$( this.obj + '' table.sgrid-content > thead > tr > th > input.select_all'' ).on( ''click'' , {grid:this} , function(event){
var grid = event.data.grid;
if( $(this).is('':checked'') ){
$( grid.obj + '' table.sgrid-content > tbody > tr > td > input.select '' ).attr(''checked'',''checked'');
$( grid.obj + '' .sgrid-content > tbody > tr > td > input.select '' ).parents(''tr'').addClass(''ui-state-highlight'');
} else {
$( grid.obj + '' table.sgrid-content > tbody > tr > td > input.select '' ).removeAttr(''checked'');
$( grid.obj + '' table.sgrid-content > tbody > tr > td > input.select '' ).parents(''tr'').removeClass(''ui-state-highlight'');
}
});

El código está diseñado para funcionar de la siguiente manera: - haga clic en input.select_all desencadena el evento - si input.select_all está marcado: add atributo marcado en todas las casillas marcadas como .select dentro de table.sgrid-content - if not: remove the ''checked ''atributo de todos los elementos input.select.

Otra función de grilla simple. Y funciona. La parte extraña es que solo funciona una vez. Con eso quiero decir, puede seleccionar todas las casillas de verificación y deseleccionarlas. Después de esa operación, la función "Seleccionar todo" deja de funcionar.

Otra cosa extraña es que, cuando reviso los elementos dom con firebug, todos se comprueban = ''marcados'' como deberían, pero se muestran y se comportan porque no fueron marcados.

Los selectores funcionan como deberían. La parte del código con adición / eliminación de ui-state-highlight funciona todo el tiempo.

Palabra de explenation: grid - es el objeto que paso para obtener grid.obj (básicamente ID de ceratain div)

Por favor dame tu opinion.

Answer 1

Puede cambiar el atributo, y eso también cambiará la propiedad, si el elemento no se tocó. Una vez que el elemento abandona este estado inicial, cambiar el atributo ya no afecta la propiedad. El comportamiento exacto probablemente varía entre los navegadores.

Instead of .attr(''checked'', ''cheked'') use .prop(''checked'', true)

Answer 2

Utilice prop (''checked'', true / false) en lugar de removeAttr

$(''input[name=foo]'').prop(''checked'', true);
$(''input[name=foo]'').prop(''checked'', false);