case jquery set cochée

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;
    });     
});

vous devez utiliser la fonction 'prop':

.prop('checked', true);

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

.attr('checked','checked')

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);
}

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);

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...

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.

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

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

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.

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()

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

A travaillé pour moi:

$checkbok.prop({checked: true});

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

    }
   });

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

Cela marche.

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

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.

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

<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>

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");

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.

<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>');
    }
})