zaznaczone pole wyboru zestaw jquery

Próbowałem już wszystkich możliwych sposobów, ale nadal nie działałem. Mam okno modalne z checkboxopcją Chcę, aby gdy modal się otworzył, checkboxzaznaczenie lub odznaczenie powinno opierać się na wartości bazy danych. (Mam to już działa z innymi polami formularza). Zacząłem sprawdzać, ale to nie działa.

Mój 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>

i jquery:

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

Próbowałem też z attrinnymi i widziałem je tutaj na forach, ale żadne nie wydaje się działać. Czy ktoś może wskazać mi właściwą drogę?

EDYCJA: ok, naprawdę brakuje mi czegoś ... Mogę zaznaczyć / odznaczyć za pomocą kodu, jeśli pole wyboru znajduje się na stronie, ale czy jest w oknie modalnym, nie mogę. Próbowałem dziesiątek różnych sposobów ...

Mam link, który powinien otworzyć modal:

i jquery do „nasłuchiwania” kliknięcia i wykonania niektórych operacji, takich jak wypełnienie niektórych pól tekstowych danymi pochodzącymi z bazy danych. Wszystko działa tak, jak chcę, ale problem polega na tym, że nie mogę ustawić pola wyboru zaznaczonego / niezaznaczonego za pomocą kodu. prosimy o pomoc!

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

musisz użyć funkcji „prop”:

.prop('checked', true);

Przed wersją jQuery 1.6 (patrz odpowiedź user2063626 ):

.attr('checked','checked')

Biorąc wszystkie proponowane odpowiedzi i stosując je do mojej sytuacji - próbując zaznaczyć lub odznaczyć pole wyboru w oparciu o pobraną wartość true (należy zaznaczyć pole) lub false (nie należy zaznaczyć pola) - wypróbowałem wszystkie powyższe i stwierdzono, że użycie .prop („zaznaczone”, true) i .prop („zaznaczone”, false ) były poprawnym rozwiązaniem.

Nie mogę jeszcze dodawać komentarzy ani odpowiedzi, ale czułem, że było to na tyle ważne, aby dodać do rozmowy.

Oto kod długiej modyfikacji pełnej kalendarza, który mówi, że jeśli pobrana wartość „allDay” jest prawdziwa, to zaznacz pole wyboru o identyfikatorze „even_allday_yn”:

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

Stary, spróbuj poniżej kodu:

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

LUB

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

LUB

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

„zaznaczony” atrybut „zaznacza” pole wyboru, gdy tylko istnieje. Aby zaznaczyć / odznaczyć pole wyboru, musisz ustawić / odznaczyć atrybut.

Aby zaznaczyć pole:

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

Aby odznaczyć pole:

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

Aby przetestować sprawdzony status:

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

Mam nadzieję, że to pomoże...

Ponieważ jesteś w oknie modalnym (dynamicznym lub na stronie), możesz użyć następującego kodu, aby osiągnąć swój cel: (Natknąłem się na ten sam problem na mojej stronie i tak go naprawiłem)

HTML:

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

KOD:

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

W powyższym „kendoWindow” jest moje okno (moje jest dynamiczne, ale robię to również, dodając do elementu bezpośrednio na stronie). Pętlę przez tablicę danych („queriesToAddToGroup”), aby sprawdzić, czy jakieś wiersze mają atrybut COPY. Jeśli tak, chcę włączyć pole wyboru w oknie, które ustawia ten atrybut, gdy użytkownik zapisuje dane z tego okna.

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

zadziała. Upewnij się, że prawda i fałsz nie znajdują się w cudzysłowie.

Możesz napisać jak poniżej podany kod.

HTML

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

jQuery

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

Mam nadzieję, że to zadziała.

Jeśli chcesz użyć tej funkcji w skrypcie GreaseMonkey do automatycznego zaznaczania pola wyboru na stronie, pamiętaj, że samo ustawienie zaznaczonej właściwości może nie wyzwalać powiązanej akcji. W takim przypadku „kliknięcie” pola wyboru prawdopodobnie spowoduje (i ustawienie również zaznaczonej właściwości).

$("#id").click()

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

Znajdź zwróci tablicę, więc użyj [0], aby uzyskać, nawet jeśli jest tylko jeden element

jeśli nie użyjesz find, to

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

działało to dobrze w Mozilla Firefox dla mnie

Pracował dla mnie:

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

Spróbuj, ponieważ prawdopodobnie używasz jQuery UI (jeśli nie, proszę o komentarz)

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

    }
   });

Czy próbowałeś uruchomić $("#estado_cat").checkboxradio("refresh")na swoim polu wyboru?

To działa.

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

Też napotkałem ten problem.

i oto mój stary nie działa kod

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

oto mój nowy kod, który działa teraz:

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

więc kluczowym punktem jest, zanim zadziała, upewnij się, że sprawdzona właściwość istnieje i nie została usunięta.

Dzieje się tak, ponieważ najnowsza wersja jquery attr('checked')zwraca 'checked'podczas prop('checked')powrotu 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>

Ustaw pole wyboru po załadowaniu okna modalnego. Myślę, że ustawiasz pole wyboru przed załadowaniem strony.

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

Wiem, że prosi o rozwiązanie Jquery, ale po prostu wskazałbym, że bardzo łatwo można przełączać to w zwykłym javascript.

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

Będzie działać we wszystkich obecnych i przyszłych wersjach.

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

Pamiętaj, aby odpowiednio zwiększyć identyfikator i atrybut. Dla pola wyboru Dynamicznie dodany pasek startowy.

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