Jquery: désactiver le "clic" de l'événement sur une case à cocher

Dans mon JQuery, j'ai un événement qui va de cocher ou décocher une case à cocher si l'utilisateur clique sur une ligne dans une table. Le problème avec ceci est que, si l'utilisateur en fait les vérifications de la case, le jquery, le feu sur la case à cocher événement et cochez/décochez la case, mais le TR événement se déclenche, puis à l'annulation de la case de valeur.

Voir un exemple ici: http://jsfiddle.net/radi8/KYvCB/1/

Je peux désactiver la case à cocher mais alors, si l'utilisateur essaie de sélectionner la case à cocher, le TR événement ne sera pas déclenché.

Ce dont j'ai besoin est une méthode pour désactiver le "clic" de l'événement de la case, mais permettent tout de même au TR événement qui se déclenche quand la case est cochée.

var charges = {
    init: function() {
        //get the selected row checkbox
        //$('.charges').attr('disabled', true);
        $('.rowclick tr').click(function() {
            if ($(this).find('td input.charges:checkbox').is(':checked')) {
                $(this).find('td input.charges:checkbox').attr("checked", false);
            }
            else {
                $(this).find('td input.charges:checkbox').attr("checked", true);
            }
        });
    }
};
charges.init();
quel est exactement le problème avec votre code? quel est le résultat et ce que vous attendez-vous à faire?
cet exemple vous avez posté semble fonctionner... quel est exactement votre question??
JKirchartz: non ça ne marche pas, si vous cliquez sur une case, il permet de basculer entre deux fois

OriginalL'auteur radi8 | 2012-04-24

  1. 14

    Vous devez vérifier si l' click événement a été déclenché sur un checkbox ou quelque part d'autre. Ce besoin de moins de ressources qu'un deuxième gestionnaire d'événement pour la case avec e.stopPropagation.

        $('.rowclick tr').click(function(e) {
        if($(e.target).closest('input[type="checkbox"]').length > 0){
            //Chechbox clicked
        }else{
            //Clicked somewhere else (-> your code)
            if ($(this).find('td input.charges:checkbox').is(':checked')) {
                $(this).find('td input.charges:checkbox').attr("checked", false);
            }
            else {
                $(this).find('td input.charges:checkbox').attr("checked", true);
            }
        }
    });

    De travail exemple: http://jsfiddle.net/KYvCB/5/

    Que faire si il y a une autre case en dehors de la table? ;]
    Rien. Il se comporte tout à fait normal. Pourquoi? Violon: jsfiddle.net/KYvCB/7
    Cela fonctionne parfaitement! Merci beaucoup pour l'aide. Comme toujours, vous les gars sur cette liste sont les meilleurs!!!
    vous avez raison, ma faute... je pense que c'est mieux: if($(e.cible).is(':checkbox')){ //Chechbox cliqué } jsfiddle.net/KYvCB/8
    pas de problème radi8, heureux de vous aider. Et tarmaq: oui, il fonctionne dans ce cas. vous avez des problèmes si la case à cocher avait des éléments d'enfant (ce qui est impossible, je sais). Cependant, si c'était un élément div au lieu d'une case à cocher, vous devez également vérifier si la cible est un enfant de la div.

    OriginalL'auteur Alex

  2. 2

    vous avez besoin pour arrêter la propagation de la click événement:

    var charges = {
    init: function() {
        $('.td input.charges:checkbox').on('click', function (e)
        {
            e.stopPropagation();
        })
        $('.rowclick tr').click(function() {
            if ($(this).find('td input.charges:checkbox').is(':checked')) {
                $(this).find('td input.charges:checkbox').attr("checked", false);
            }
            else {
                $(this).find('td input.charges:checkbox').attr("checked", true);
            }
        });
    }
};
charges.init();

    http://jsfiddle.net/KYvCB/4/

    OriginalL'auteur tarmaq