case jquery set cochée

479

J'ai déjà essayé toutes les manières possibles, mais je ne l'ai toujours pas fait fonctionner. J'ai une fenêtre modale avec un checkboxje veux que lorsque le modal s'ouvre, la checkboxvérification ou la décoche doit être 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 vérifier, mais cela n'a pas fonctionné.

Ma 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 également essayé avec attr, et d'autres vu ici dans les forums, mais aucun ne semble fonctionner. Quelqu'un peut-il me montrer le bon chemin?

EDIT: ok, il me manque vraiment quelque chose ici ... Je peux cocher / décocher en utilisant du code si la case à cocher est dans la page, mais est-ce 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 comme remplir certaines zones de texte avec des données provenant de la base de données. Tout fonctionne comme je veux, mais le problème est que je ne peux pas cocher / décocher la case à l'aide 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;
    });     
});
psopa
la source
quelle classe est appliquée sur la division modale lorsque le modal s'ouvre? De plus, comment vérifiez-vous la valeur de la base de données - en utilisant AJAX ou est-elle déjà pré-récupérée et stockée dans une variable?
user1428716
définir la case à cocher après le chargement de la fenêtre modale Je pense que vous définissez la case à cocher avant de charger la fenêtre modale. $ ('# fModal'). modal ('show'); $ ("# estado_cat"). attr ("vérifié", "vérifié");
Vineeth Bhaskaran

Réponses:

805

vous devez utiliser la fonction 'prop':

.prop('checked', true);

Avant jQuery 1.6 (voir la réponse de user2063626 ):

.attr('checked','checked')
singe Batteur
la source
5
Vous semblez avoir la bonne réponse. Pourriez-vous élaborer? stackoverflow.com/a/5876747/29182
Ziggy
1
C'est bon à savoir. Oublié cela lors de l'examen de la documentation de migration de jQuery 3.3.x
reaper_unique
1
Bon à savoir que vous ne pouvez pas utiliser attr dans les nouvelles versions de jQuery comme je le pensais initialement
Kaloyan
75

Prendre toutes les réponses proposées et les appliquer à ma situation - essayer de cocher ou décocher une case basée sur une valeur récupérée de vrai (devrait cocher la case) ou faux (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 ou de réponses, mais je pensais que c'était suffisamment important pour ajouter à la conversation.

Voici le code long pour une modification de calendrier complet qui dit que si la valeur récupérée "allDay" est vraie, alors cochez la case avec l'ID "even_allday_yn":

if (allDay)
{
    $( "#even_allday_yn").prop('checked', true);
}
else
{
    $( "#even_allday_yn").prop('checked', false);
}
eriknoyes
la source
48
Pourquoi pas sur une seule ligne? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz
3
Il essayait de démontrer les valeurs possibles. Comment sauriez-vous la valeur réelle du "allDay" sans un exemple comme celui-ci ici?
Soroush Falahati
1
@Xavier Hayoz. Cela fonctionne si, et seulement si, allDay renvoie «vrai» ou «faux» comme valeur littérale - pas purement binaire. Les cases à cocher sont mal conçues en html et leur statut coché peut s'exprimer de manières très différentes. Le seul moyen sûr et que je connaisse est: allDay === 'true'? $ ('# even_allday_yn) .prop ("vérifié", vrai): $ (' # even_allday_yn) .prop ("vérifié", faux). Remarquez l'opérateur d'égalité stricte.
Brice Coustillas
1
$('#even_allday_yn').prop('checked', allDay === true)fonctionnera car allDay === truedonne un résultat booléen.
leftclickben
58

Mec essayez ci-dessous le code:

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

OU

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

OU

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

la source
26
Comme dans la réponse de KeyOfJ, utilisez .prop('checked', true)au lieu de attr- je suis juste tombé sur le même problème et propfonctionne.
semmelbroesel
3
Pour info si vous souhaitez utiliser le :checkedpseudo-sélecteur ou d'autres fonctionnalités HTML de case à cocher native, vous devez utiliser .prop.
benastan
1
J'ai essayé cela et cela n'a pas fonctionné mais quand j'ai changé le code en $ ("div.row-form #estado_cat"). Prop ("vérifié", "vérifié"); cela a fonctionné. (Modification de l'attr en accessoire).
Jim Evans
1
Malheureusement, prop est jQuery 1.6 et supérieur, donc si vous êtes coincé dans un cadre hérité qui ne fonctionnera pas pour vous
wolffer-east
.attr()est la voie à suivre pour les versions antérieures, .prop()pour jQuery 1.6+.
vapcguy
26

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

Pour cocher la case:

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

Pour décocher la case:

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

Pour tester l'état vérifié:

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

J'espère que cela aide...

shadock
la source
19

Puisque vous êtes dans une fenêtre modale (qu'elle soit 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 c'est ainsi que je l'ai résolu)

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 en ajoutant un élément directement dans la page). Je parcours un tableau de données ("queriesToAddToGroup") pour voir si des lignes ont un attribut COPY. Si c'est le cas, je souhaite activer la case à cocher dans la fenêtre qui définit cet attribut lorsqu'un utilisateur enregistre à partir de cette fenêtre.

KeyOfJ
la source
4
Il convient de noter que, bien que d'autres réponses à la question à l'étude puissent «fonctionner», l'utilisation, propcomme le suggère cette réponse, est la manière CORRECTE d'accomplir la vérification / dé-vérification dynamique des cases à cocher jQuery.
Joshua Burns
11
.attr("checked",true)
.attr("checked",false)

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

user1849310
la source
1
Attr ne coche pas la case à cocher, prop est le seul à faire la vérification. J'aime .prop('checked', true); Plus d'infos dans cet article
casivaagustin
@casivaagustin Dépend de la version jQuery. Je crois que plus tôt que jQuery 1.6, .attr()a fonctionné, comme décrit.
vapcguy
5

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 fonctionnera pour vous.

Subir
la source
4

Si vous souhaitez utiliser cette fonctionnalité pour un script GreaseMonkey pour 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 le fera probablement (et définira également la propriété cochée).

$("#id").click()
lordcheeto
la source
3
$("#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

Arvin
la source
1
Cela fonctionne, toutes les autres solutions ne sont pas détectées si vous avez: un style vérifié dans votre css
bhappy
3

A travaillé pour moi:

$checkbok.prop({checked: true});
Sergio Pulgarin
la source
utilisateur $ ("# estado_cat"). attr ("vérifié", "vérifié");
Vineeth Bhaskaran
2

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

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

    }
   });
user1428716
la source
@ user2063626 - la partie du js à l'intérieur de la fonction est copiée de votre réponse
user1428716
2

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

J2N
la source
2

Cela marche.

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

J'ai aussi rencontré ce problème.

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 fonctionne maintenant:

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

ainsi, le point clé est avant qu'il ne fonctionne, assurez-vous que la propriété vérifiée existe et n'a pas été supprimée.

Tourbillon
la source
Beaucoup plus simple:Jbookaccess.prop("checked", data.access != 'private');
Legionar
2

Cela se produit car vous avec la version la plus récente de jquery attr('checked')retourne 'checked'lors de prop('checked')retours true.

Rohan
la source
2
<body>
      <input id="IsActive" name="IsActive" type="checkbox" value="false">
</body>

<script>
    $('#IsActive').change(function () {
         var chk = $("#IsActive")
         var IsChecked = chk[0].checked
         if (IsChecked) {
          chk.attr('checked', 'checked')
         } 
         else {
          chk.removeAttr('checked')                            
         }
          chk.attr('value', IsChecked)
     });
</script>
reza akhlaghi
la source
cela fonctionne bien dans chrome et firefox
reza akhlaghi
1

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

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

Je sais que cela demande une solution Jquery, mais je pensais simplement qu'il serait très facile de basculer cela en Javascript simple.

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

Il fonctionnera dans toutes les versions actuelles et futures.

YungGun
la source
0
<div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" name="quiz_answer" id="customSwitch0">
      <label class="custom-control-label" for="customSwitch0"><span class="fa fa-minus fa-lg mt-1"></span></label>
  </div>

N'oubliez pas d'incrémenter l'attribut id et for respectivement. Pour la case à cocher Bootstrap ajoutée dynamiquement.

$(document).on('change', '.custom-switch', function(){
    let parent = $(this);
    parent.find('.custom-control-label > span').remove();
    let current_toggle = parent.find('.custom-control-input').attr('id');
    if($('#'+current_toggle+'').prop("checked") == true){
        parent.find('.custom-control-label').append('<span class="fa fa-check fa-lg mt-1"></span>');
    }
    else if($('#'+current_toggle+'').prop("checked") == false){
        parent.find('.custom-control-label').append('<span class="fa fa-minus fa-lg mt-1"></span>');
    }
})
Alemoh Rapheal Baja
la source