jQuery set checkbox aangevinkt

Ik heb alle mogelijke manieren al geprobeerd, maar het werkt nog steeds niet.
Ik heb een modaal venster met een checkbox. Ik wil dat wanneer de modal wordt geopend, het aan- of uitvinken van de checkboxgebaseerd moet zijn op een databasewaarde. (Ik heb dat al werkend met andere formuliervelden.) Ik probeerde het te laten controleren, maar het werkte niet.

Mijn HTML-div:

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

en de jQuery:

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

Ik heb het ook geprobeerd met attren anderen die hier op de forums te zien zijn, maar geen enkele lijkt te werken.
Kan iemand me de juiste weg wijzen?

BEWERKEN

Ok, ik mis hier echt iets. Ik kan met code aan-/uitvinken als het selectievakje op de pagina staat, maar als het in het modale-venster staat, kan ik dat niet. Ik heb tientallen verschillende manieren geprobeerd.

Ik heb een link die de modal zou moeten openen:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

en jQuery om de klik te “luisteren” en enkele bewerkingen uit te voeren, zoals het vullen van enkele tekstvakken met gegevens uit de database. Alles werkt zoals ik wil, maar het probleem is dat ik het selectievakje niet aangevinkt/uitgeschakeld kan instellen met code. Help alstublieft!

$(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 it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });
        evt.preventDefault();
        return false;
    });
});

Antwoord 1, autoriteit 100%

je moet de ‘prop’ functie gebruiken:

.prop('checked', true);

Vóór jQuery 1.6(zie antwoord van gebruiker2063626):

.attr('checked','checked')

Antwoord 2, autoriteit 9%

Alle voorgestelde antwoorden nemen en toepassen op mijn situatie – ik probeerde een selectievakje aan of uit te vinken op basis van een opgehaalde waarde van true (moet het vakje aanvinken) of false (mag het vakje niet aanvinken) – ik heb alle het bovenstaande en ontdekte dat het gebruik van .prop(“checked”, true)en .prop(“checked”, false) de juiste oplossing was.

Ik kan nog geen opmerkingen of antwoorden toevoegen, maar ik vond dit belangrijk genoeg om aan het gesprek toe te voegen.

Hier is de handgeschreven code voor een volledige kalenderwijziging die zegt dat als de opgehaalde waarde “allDay” waar is, vink dan het selectievakje met ID “even_allday_yn” aan:

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

Antwoord 3, autoriteit 7%

Probeer onderstaande code:

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

OF

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

OF

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

Antwoord 4, autoriteit 3%

“aangevinkt” kenmerk ‘vinkt’ het selectievakje aan zodra het bestaat. Dus om een selectievakje aan/uit te vinken, moet u het kenmerk in-/uitschakelen.

Voor het aanvinken van het vakje:

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

Om het vakje uit te schakelen:

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

Voor het testen van de gecontroleerde status:

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

Hopelijk helpt het…

Antwoord 5, autoriteit 2%

Omdat u zich in een modaal venster bevindt (hetzij dynamisch of op de pagina), kunt u de volgende code gebruiken om uw doel te bereiken: (Ik kwam hetzelfde probleem tegen op mijn site en dit is hoe ik het heb opgelost)

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

In het bovenstaande “kendoWindow” is mijn venster (het mijne is dynamisch, maar ik doe dit ook wanneer ik iets rechtstreeks op de pagina aan een element toevoeg). Ik loop door een reeks gegevens (“queriesToAddToGroup”) om te zien of rijen een kenmerk COPY hebben. Als dat het geval is, wil ik het selectievakje in het venster inschakelen waarmee dat kenmerk wordt ingesteld wanneer een gebruiker vanuit dit venster opslaat.

Antwoord 6

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

zal werken. Zorg ervoor dat waar en onwaar niet tussen aanhalingstekens staan.

Antwoord 7

Ik weet dat dit om een JQuery-oplossing vraagt, maar ik wilde u erop wijzen dat het heel eenvoudig is om dit in gewoon javascript om te zetten.

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

Het werkt in alle huidige en toekomstige versies.

Antwoord 8

Je kunt schrijven zoals hieronder gegeven code.

HTML

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

jQuery

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

Ik hoop dat het voor je werkt.

Antwoord 9

Als je deze functionaliteit wilt gebruiken voor een GreaseMonkey-script om automatisch een selectievakje op een pagina aan te vinken, houd er dan rekening mee dat het eenvoudigweg instellen van de aangevinkte eigenschap de bijbehorende actie mogelijk niet activeert. In dat geval zal het “aanklikken” van het selectievakje waarschijnlijk (en ook de aangevinkte eigenschap instellen).

$("#id").click()

Antwoord 10

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

Antwoord 11

$("#divParentClip").find("#subclip_checkbox")[0].checked=true;

Find geeft array terug, dus gebruik [0] om te krijgen, zelfs als er maar één item is

als je zoek niet gebruikt,

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

dit werkte prima in Mozilla Firefox voor mij

Antwoord 12

Werkte voor mij:

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

Antwoord 13

Probeer dit omdat je waarschijnlijk jQuery UI gebruikt (zo niet, reageer dan)

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

Antwoord 14

Heb je geprobeerd $("#estado_cat").checkboxradio("refresh")uit te voeren in je selectievakje?

Antwoord 15

Dit werkt.

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

Antwoord 16

Ik ben dit probleem ook tegengekomen.

en hier is mijn oude code die niet werkt

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

hier is mijn nieuwe code die nu werkt:

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

dus het belangrijkste punt is voordat het werkte, zorg ervoor dat de aangevinkte eigenschap bestaat en niet is verwijderd.

Antwoord 17

Dit gebeurt omdat u met de nieuwste versie van jQuery attr('checked')'checked'retourneert terwijl prop('checked')geeft trueterug.

Antwoord 18

Schakel het selectievakje in na het laden van het modale venster. Ik denk dat je het selectievakje instelt voordat je de pagina laadt.

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

Antwoord 19

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

Vergeet niet om respectievelijk de attribuut the id en for te verhogen. Voor Dynamisch toegevoegde bootstrap selectievakje.

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