zaznaczone pole wyboru zestaw jquery

478

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;
    });     
});
psopa
źródło
jaką klasę stosuje się do modalnego diva, gdy modal się otwiera? Również w jaki sposób sprawdzasz wartość bazy danych - używając AJAX, czy jest ona już wstępnie pobierana i przechowywana w zmiennej?
user1428716,
ustaw pole wyboru po załadowaniu okna modalnego. Myślę, że ustawiasz pole wyboru przed załadowaniem okna modalnego. $ ('# fModal'). modal ('show'); $ („# estado_cat”). attr („zaznaczony”, „zaznaczony”);
Vineeth Bhaskaran

Odpowiedzi:

804

musisz użyć funkcji „prop”:

.prop('checked', true);

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

.attr('checked','checked')
singe Batteur
źródło
5
Wydaje się, że masz poprawną odpowiedź. Czy mógłbyś opracować? stackoverflow.com/a/5876747/29182
Ziggy
1
To dobrze wiedzieć. Przegapiłem to podczas przeglądania dokumentacji migracji jQuery 3.3.x
reaper_unique
1
Dobrze wiedzieć, że nie można używać ATRT w nowszych wersjach jQuery, jak początkowo myślałem
Kaloyan,
75

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);
}
eriknoyes
źródło
48
Dlaczego nie tylko na jednej linii? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz
3
Próbował wykazać możliwe wartości. Skąd miałbyś poznać prawdziwą wartość „AllDay” bez takiego przykładu tutaj?
Soroush Falahati
1
@Xavier Hayoz. Działa to wtedy i tylko wtedy, gdy allDay zwraca „true” lub „false” jako wartość dosłowną - a nie czystą wartość binarną. Pola wyboru są źle zaprojektowane w html, a ich status można sprawdzić na wiele różnych sposobów. Bezpieczny i jedyny znany mi sposób to: allDay === „prawda”? $ ('# even_allday_yn) .prop („zaznaczone”, true): $ (' # even_allday_yn) .prop („zaznaczone”, false). Zwróć uwagę na operatora ścisłej równości.
Brice Coustillas
1
$('#even_allday_yn').prop('checked', allDay === true)będzie działać, ponieważ allDay === truedaje wynik logiczny.
leftclickben
58

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

źródło
26
Jak w odpowiedzi KeyOfJ, użyj .prop('checked', true)zamiast attr- właśnie natrafiłem na ten sam problem i propdziała.
semmelbroesel
3
Do Twojej wiadomości, jeśli chcesz skorzystać z :checkedpseudoselektora lub innych natywnych funkcji HTML w polu wyboru, musisz użyć .prop.
benastan
1
Próbowałem tego i nie działało, ale kiedy zmieniłem kod na $ („div.row-form #estado_cat”). Prop („zaznaczony”, „zaznaczony”); zadziałało. (Zmieniono ATTR na REP).
Jim Evans,
1
Niestety prop jest w wersji jQuery 1.6 i wyższej, więc jeśli utkniesz w starszej strukturze, która nie będzie dla ciebie
działać
.attr()jest sposobem na wcześniejsze wersje, .prop()dla jQuery 1.6+.
vapcguy
26

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

shadock
źródło
19

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.

KeyOfJ
źródło
4
Należy zauważyć, że podczas gdy inne odpowiedzi na pytanie mogą „działać”, użycie, propjak sugeruje ta odpowiedź, jest PRAWIDŁOWYM sposobem na wykonanie dynamicznego sprawdzania / odznaczania pola wyboru jQuery.
Joshua Burns
11
.attr("checked",true)
.attr("checked",false)

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

użytkownik1849310
źródło
1
Attr nie będzie zaznaczał pola wyboru, prop jest tym, który sprawdzi. Lubię .prop('checked', true); Więcej informacji w tym poście
casivaagustin
@casivaagustin Zależy od wersji jQuery. Wierzę, że wcześniej niż jQuery 1.6, .attr()działał zgodnie z opisem.
vapcguy
5

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.

Subir
źródło
4

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()
lordcheeto
źródło
3
$("#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

Arvin
źródło
1
Działa, wszystkie inne rozwiązania nie są wykrywane, jeśli masz: sprawdzony styl w css
bhappy
3

Pracował dla mnie:

$checkbok.prop({checked: true});
Sergio Pulgarin
źródło
użytkownik $ („# estado_cat”). attr („zaznaczony”, „zaznaczony”);
Vineeth Bhaskaran,
2

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

    }
   });
użytkownik 1428716
źródło
@ user2063626 - część js wewnątrz funkcji jest kopiowana z twojej odpowiedzi
user1428716
2

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

J2N
źródło
2

To działa.

 $("div.row-form input[type='checkbox']").attr('checked','checked');
Chetan Patel
źródło
2

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.

Wir
źródło
Znacznie prościej:Jbookaccess.prop("checked", data.access != 'private');
Legionar
2

Dzieje się tak, ponieważ najnowsza wersja jquery attr('checked')zwraca 'checked'podczas prop('checked')powrotu true.

Rohan
źródło
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
źródło
działa to dobrze w chrome i firefox
reza akhlaghi
1

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");
Vineeth Bhaskaran
źródło
1

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.

YungGun
źródło
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>

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>');
    }
})
Alemoh Rapheal Baja
źródło