jQuery / Javascript: événement de clic sur une case à cocher et attribut 'checked'

Le code:

$('input.media-checkbox').live('click', function(e){

    e.preventDefault();
    var that = $(this);

    if (that.attr('checked') == 'checked'){

        var m = that.attr('media');
        var mid = 'verify_' + m;
        that.parents('div.state-container').find('ul.' + mid).remove();
        that.attr('checked', false);
    } else {

        var url = AJAX_URL;

        $.ajax({
           type: 'GET',
           url: url,
           dataType: 'html',
           success: function(data){

                that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
                that.attr('checked', 'checked');
           }
        }); 
    }

    return false;
});

Je suis ajaxing dans un formulaire, puis le tir de l'événement de clic sur les cases à cocher afin d'ajax dans une autre partielle si nécessaire. La forme est bien inséré, puis cliquez sur événements sont déclenchés, en cochant les cases qui doivent être vérifiés et le déclenchement du second ajax, depuis le checked attribut de la case à cocher a été initialement false.

Ce qui est de caillage mon fromage est si je DÉCOCHEZ l'une de ces boîtes. Malgré e.preventDefault()le checked de définir l'attribut false AVANT le test, de sorte que le if instruction s'exécute toujours la else déclaration. J'ai aussi essayé avec $.is(':checked')donc je suis complètement dérouté.

Il semble que décoché -> état coché lit l'état d'origine, mais vérifié -> décoché ne l'est pas. Toute aide?

source d'informationauteur b. e. hollenbeck

  1. 15

    B. E., je sais que ça a été une année, mais je pense que j'ai trouvé la solution,

    Le problème ici est que l'événement click réellement obtenir ce qu'on appelle et exécute AVANT le "checked" la propriété est ajoutée à la case de saisie. De sorte que la fonction s'exécute, regarde pour voir si l'entrée a la "vérifié" attribut, et exécute la condition else. ENSUITE, l'élément est donné le "checked" de la propriété.

    Je viens de tomber sur ce ainsi, et ma solution a été de lier la fonction du changement de la fonction plutôt que la fonction de clic, comme le changement ne se déclenche APRÈS la propriété checked a été mis à jour sur l'entrée.

    J'espère que cela vous aide, et si non, quelqu'un d'autre qui arrive de tomber sur ce post, alors confronté à un problème similaire.

  2. 2

    Bien, à droite. Vous avez défini le live événement, donc je pense votre script peut également être de répondre à la définir comme vérifié, mais je ne peux pas totalement dire ce que vous essayez d'ici sans avoir vu le balisage, mais voici mon réécriture.

    $('input.media-checkbox').live('click', function(e){

    if ($(this).is(':checked')) {
        var m = $(this).attr('media');
        var mid = 'verify_' + m;
        $(this).parents('div.state-container')
            .find('ul.' + mid)
            .remove();
        $(this).attr('checked', false);
    } else {
        var url = AJAX_URL;
        var that = this;
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function(data) {
                $(that).parents('li')
                    .siblings('li.verification')
                    .children('div.media-verification')
                    .append(data)
                    .fadeIn(500);
                $(that).attr('checked', true);
            }
        }); 
    }
    return false;

});
  3. 1

    Essayez d'utiliser e.stopPropagation() au lieu de e.preventDefault() et également supprimer return false. De retour false dans jQuery est équivalent à e.stopPropagation() + e.preventDefault(). e.preventDefault() empêche la case de checked.

  4. 0

    Il semble être un, en raison de requêtes asynchrones. L'exécution va passé $.ajaxavant le succès de rappel des feux. Lorsque vous cliquez sur la case à cocher à nouveau, c'est l'état n'a pas encore été mis à jour par le précédent de la demande de rappel. Ce que vous pouvez faire est d'essayer de désactiver la case à cocher contrôle avant le déclenchement de l'appel ajax, et de l'activer à nouveau dans le succès de rappel:

    that.attr("disabled", "disabled");
var url = AJAX_URL;   
$.ajax({
    type: 'GET',
    url: url,
    dataType: 'html',
    success: function(data){

        that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
        that.attr('checked', 'checked');
        that.removeAttr('disabled');
    }
});

    Qui fera en sorte que deux des clics successifs ne conduira pas à des comportements imprévisibles. L'autre moyen serait d'utiliser un synchrone demande, c'est à dire async: false mais qui permet de bloquer l'ensemble de navigateur pour la durée.

  5. 0

    Je pense que c'est dû à un bug bizarre sous IE. Vérifier/régler l'attribut defaultChecked avec vérifié. Essayez ceci dans votre condition si,

    if (that.attr('checked')=='checked' || that.attr("defaultChecked")=='checked'){     
      var m = that.attr('media');  
      var mid = 'verify_' + m;
      that.parents('div.state-container').find('ul.' + mid).remove();
      that.attr('checked', false);
      that.attr('defaultChecked', false); 
} else {
  6. 0

    C'est sans doute qu'une réponse partielle, mais dans votre test, $(this).attr('checked') doit retourner true si la case est cochée et false si pas. Donc il suffit de changer votre conditionnelle à if (that.attr('checked'))