web-dev-qa-db-fra.com

jquery attr ('vérifié', 'vérifié') ne fonctionne qu'une seule fois

J'ai un problème pour trouver la raison du comportement jquery/checkbox suivant.

$( 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');

}

});

Le code est destiné à fonctionner comme suit: - cliquer sur input.select_all déclenche l'événement - si input.select_all est coché: ajouter un attribut coché à toutes les cases à cocher marquées comme .select dans table.sgrid-content - sinon: supprimer le 'coché 'attribut de tous les éléments input.select.

Encore une autre fonction de grille simple. Et il fonctionne. La partie étrange est que cela ne fonctionne qu'une seule fois. Je veux dire par là que vous pouvez sélectionner toutes les cases à cocher et les désélectionner. Après cette opération, la fonction "Sélectionner tout" cesse de fonctionner.

Une autre chose étrange est que lorsque je vérifie les éléments dom avec Firebug, ils deviennent tous vérifiés = attr 'vérifié' comme ils le devraient, mais ils s'affichent et se comportent comme ils n'ont pas été vérifiés.

Les sélecteurs fonctionnent comme ils le devraient. La partie de code avec ajout/suppression i-state-highlight fonctionne tout le temps.

Mot d'explication: grid - est l'objet que je passe pour obtenir grid.obj (essentiellement ID d'un div ceratain)

S'il vous plaît, donnez-moi votre opinion.

javascriptjquerycheckboxchecked
25
PiWo

Utilisez prop ('checked', true/false) au lieu de removeAttr

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

Vous pouvez changer l'attribut, et cela changera également la propriété, si l'élément n'est pas touché. Une fois que l'élément quitte cet état initial, la modification de l'attribut n'affecte plus la propriété. Le comportement exact varie probablement d'un navigateur à l'autre.

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

1
Suraj