web-dev-qa-db-fra.com

jquery set checkbox cochée

J'ai déjà essayé tous les moyens possibles, mais je n'ai toujours pas réussi à le faire fonctionner. J'ai une fenêtre modale avec un checkbox Je veux que lorsque la modale s'ouvre, la coche checkbox ou la case à cocher soit basée sur une valeur de base de données. (Je travaille déjà avec d'autres champs de formulaire.) J'ai commencé à essayer de le faire vérifier, mais cela n'a pas fonctionné.

Mon div HTML:

<div id="fModal" class="modal" >
    ...
    <div class="row-form">
        <div class="span12">
            <span class="top title">Estado</span>

          <input type="checkbox"  id="estado_cat" class="ibtn">
       </div>
    </div>             
</div>

et le jquery:

$("#estado_cat").prop( "checked", true );

J'ai aussi essayé avec attr, et d'autres vus ici dans les forums, mais aucun ne semble fonctionner. Est-ce que quelqu'un peut me montrer le bon chemin?

EDIT: ok, il me manque vraiment quelque chose ici ... Je peux cocher/décocher à l'aide de code si la case à cocher est dans la page, mais si c'est dans la fenêtre modale, je ne peux pas. J'ai essayé des dizaines de façons différentes ...

J'ai un lien qui est censé ouvrir le modal:

et jquery pour "écouter" le clic et exécuter certaines opérations, telles que le remplissage de zones de texte avec des données provenant de la base de données. Tout fonctionne comme je le veux, mais le problème est que je ne peux pas activer ou désactiver la case à cocher avec du code. Aidez-moi, s'il vous plaît!

$(function() {
 $(".editButton").click(function(){
       var id = $(this).data('id'); 
       $.ajax({
          type: "POST",
          url: "process.php",
          dataType:"json",
          data: { id: id, op: "edit" },
        }).done(function( data ) {
//the next two lines work fine, i.e., it grabs the value from database and fills the textboxes
          $("#nome_categoria").val( data['nome_categoria'] );
          $("#descricao_categoria").val( data['descricao_categoria'] );
//then I tried to set the checkbox checked (because its unchecked by default) and it does not work
           $("#estado_cat").prop("checked", true);
        $('#fModal').modal('show');
});
    evt.preventDefault();
    return false;
    });     
});
jquerycheckbox
411
psopa

vous devez utiliser la fonction 'prop':

.prop('checked', true);

Avant jQuery 1.6 (voir réponse de l'utilisateur2063626 ):

.attr('checked','checked')
714
singe Batteur

Prendre toutes les réponses proposées et les appliquer à ma situation - essayer de cocher ou de décocher une case à cocher basée sur une valeur extraite de true (doit cocher la case) ou false (ne devrait pas cocher la case) - J'ai essayé tout ce qui précède et a constaté que l’utilisation de . prop ("vérifié", vrai) et . prop ("vérifié", faux) était la bonne solution.

Je ne peux pas encore ajouter de commentaires ni de réponses, mais j’ai estimé que c’était assez important pour que nous puissions en ajouter dans la conversation.

Voici le code longhand pour une modification complète du calendrier qui indique si la valeur extraite "allDay" est vraie, puis cochez la case avec l'ID "even_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}
70
eriknoyes

Mec essayer ci-dessous le code:

$("div.row-form input[type='checkbox']").attr('checked','checked')

OR

$("div.row-form #estado_cat").attr("checked","checked");

OR

$("div.row-form #estado_cat").attr("checked",true);
52
user2063626

L'attribut "vérifié" coche la case dès qu'elle existe. Donc, pour cocher/décocher une case, vous devez définir/désélectionner l'attribut.

Pour cocher la case:

$('#myCheckbox').attr('checked', 'checked');

Pour décocher la case:

$('#myCheckbox').removeAttr('checked');

Pour tester le statut vérifié:

if ($('#myCheckbox').is(':checked'))

J'espère que ça aide...

17
shadock

Puisque vous êtes dans une fenêtre modale (dynamique ou dans la page), vous pouvez utiliser le code suivant pour atteindre votre objectif: (J'ai rencontré le même problème sur mon site et voici comment je l'ai corrigé)

HTML:

<div class="content-container" style="text-align: right;">
    <input type="checkbox" id="QueryGroupCopyQueries">
    <label for="QueryGroupCopyQueries">Create Copies</label>                                                   
</div>

CODE:

$.each(queriesToAddToGroup, function (index, query) {
    if (query.groupAddType === queriesGroupAddType.COPY) {

        // USE FIND against your dynamic window and PROP to set the value
        // if you are using JQUERY 1.6 or higher.
        $(kendoWindow).find("input#QueryGroupCopyQueries").prop("checked", true);

        return;
    }

Dans ce qui précède, "kendoWindow" est ma fenêtre (la mienne est dynamique, mais je le fais également lors de l'ajout d'un élément directement dans la page). Je passe en boucle dans un tableau de données ("queriesToAddToGroup") pour voir si des lignes ont un attribut COPY. Si c'est le cas, je veux activer la case à cocher dans la fenêtre qui définit cet attribut lorsqu'un utilisateur enregistre à partir de cette fenêtre.

17
KeyOfJ
.attr("checked",true)
.attr("checked",false)

va travailler.Assurez-vous que vrai et faux ne sont pas entre guillemets.

11
user1849310

Vous pouvez écrire comme ci-dessous le code donné.

HTML

<input type="checkbox"  id="estado_cat" class="ibtn">

jQuery

$(document).ready(function(){
    $(".ibtn").click(function(){
        $(".ibtn").attr("checked", "checked");
    });
});

J'espère que cela fonctionne pour vous.

5
Subir

A travaillé pour moi:

$checkbok.prop({checked: true});
3
Sergio Pulgarin
$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find retournera un tableau, utilisez donc [0] pour obtenir même s'il n'y a qu'un seul élément

si vous n'utilisez pas find alors

$("#subclip_checkbox").checked=true;

cela a bien fonctionné dans Mozilla Firefox pour moi

3
Arvin

Cela marche.

 $("div.row-form input[type='checkbox']").attr('checked','checked');
2
Chetan Patel

Si vous souhaitez utiliser cette fonctionnalité pour un script GreaseMonkey afin de cocher automatiquement une case à cocher sur une page, gardez à l'esprit que le simple fait de définir la propriété cochée peut ne pas déclencher l'action associée. Dans ce cas, "cliquer" sur la case à cocher sera probablement (et définira également la propriété cochée).

$("#id").click()
2
lordcheeto

Avez-vous essayé d'exécuter $("#estado_cat").checkboxradio("refresh") sur votre case à cocher?

2
J2N

Cela est dû au fait que vous, avec la dernière version de jquery attr('checked') renvoie 'checked' alors que prop('checked') renvoie true.

2
Rohan

Essayez ceci car vous utilisez probablement jQuery UI (sinon, commentez)

 $("#fModal" ).dialog({
     open: function( event, ui ) {

     if(//some hidden value check which stores the DB value==expected value for
      checking the Checkbox)

         $("div.row-form input[type='checkbox']").attr('checked','checked');

    }
   });
2
user1428716

Activez la case à cocher après avoir chargé la fenêtre modale. Je pense que vous activez la case à cocher avant de charger la page.

$('#fModal').modal('show');
$("#estado_cat").attr("checked","checked");
1
Vineeth Bhaskaran

J'ai rencontré ce problème aussi.

et voici mon ancien code ne fonctionne pas

if(data.access == 'private'){
     Jbookaccess.removeProp("checked") ; 
    //I also have tried : Jbookaccess.removeAttr("checked") ;
 }else{
    Jbookaccess.prop("checked", true)
}

voici mon nouveau code qui est travaillé maintenant:

if(data.access == 'private'){
     Jbookaccess.prop("checked",false) ;
 }else{
    Jbookaccess.prop("checked", true)
}

donc, le point clé est avant que cela fonctionne, assurez-vous que la propriété vérifiée existe et n’a pas été supprimée.

1
Eddy

Je sais que cela demande une solution Jquery, mais je tiens à souligner qu'il est très facile de basculer cela en javascript.

var element = document.getElementById("estado_cat");
element.checked = 1;

Cela fonctionnera dans toutes les versions actuelles et futures.

0
YungGun