jquery seti onay kutusu işaretlendi


479

Zaten olası tüm yolları denedim, ama hala işe yaramadı. Kalıcı bir pencere var, checkboxben bir modal açıldığında, checkboxkontrol veya işaretini kaldır bir veritabanı değerine dayanmalıdır istiyorum. (Ben zaten başkaları form alanları ile çalışma var.) Kontrol edilmeye çalıştım ama işe yaramadı.

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

ve jquery:

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

Ben de denedim attrve diğerleri burada forumlarda gördüm, ancak hiçbiri işe yaramadı. Birisi bana doğru yolu gösterebilir mi?

EDIT: Tamam, gerçekten burada bir şey eksik ... Onay kutusu sayfada ise kodu kullanarak kontrol / işaretini kaldırabilir, ancak kalıcı pencerede, yapamam. Düzinelerce farklı yol denedim ...

Kipi açmam gereken bir bağlantım var:

ve jquery tıklamayı "dinlemek" ve veritabanından gelen verilerle bazı metin kutularını doldurmak gibi bazı işlemleri yürütmek için. Her şey istediğim gibi çalışıyor ama sorun kodu kullanarak onay kutusunu işaretli / işaretsiz ayarlayamıyorum. yardım lütfen!

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

mod açıldığında mod sınıfına hangi sınıf uygulanır? Ayrıca veritabanı değerini nasıl kontrol edersiniz - AJAX kullanarak mı yoksa önceden getirilmiş ve bir değişkende saklanmış mı?
user1428716

mod penceresini yükledikten sonra onay kutusunu ayarla Mod penceresini yüklemeden önce onay kutusunu ayarladığınızı düşünüyorum. $ ( '# fModal') modal ( 'şov.'); $ ( "# estado_cat") özn ( "işaretli", "işaretli.");
Vineeth Bhaskaran

Yanıtlar:


805

'prop' işlevini kullanmanız gerekir:

.prop('checked', true);

JQuery 1.6'dan önce (bkz. User2063626'nın cevabı ):

.attr('checked','checked')

5
Doğru cevaba sahipsin. Açıklayabilir misiniz? stackoverflow.com/a/5876747/29182
Ziggy

1
Bunu bilmek güzel. JQuery 3.3.x geçiş belgelerine geçerken bunu göz ardı etti
reaper_unique

1
Başlangıçta düşündüğüm gibi jQuery'nin yeni sürümlerinde attr kullanamayacağınızı bilmek güzel
Kaloyan

75

Önerilen tüm cevapları almak ve bunları durumuma uygulamak - geri alınan veya doğru (kutuyu işaretlemeli) veya yanlış (kutuyu işaretlememeli) değerine göre bir onay kutusunu işaretlemeye veya işaretini kaldırmaya çalışarak - Yukarıdakilerin tümünü denedim ve kullanarak bulundu .prop (doğru, "işaretli") ve .prop ( "işaretli" false ) doğru çözüm idi.

Henüz yorum veya cevap ekleyemiyorum, ancak bunun sohbete eklenecek kadar önemli olduğunu hissettim.

Alınan "allDay" değeri doğru ise "even_allday_yn" kimliğine sahip onay kutusunu işaretleyen bir tam takvim değişikliği için uzun el kodu:

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

48
Neden sadece tek bir satırda değil? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz

3
Olası değerleri göstermeye çalışıyordu. Burada böyle bir örnek olmadan "allDay" ın gerçek değerini nasıl bilebilirsiniz?
Soroush Falahati

1
@Xavier Hayoz. Bu, yalnızca allDay 'doğru' veya 'yanlış' değerini salt bir ikili değer olarak döndürürse çalışır - saf bir ikili değer değil. Onay kutuları html biçiminde kötü bir şekilde tasarlanmıştır ve denetlenen durumları çok farklı şekillerde ifade edilebilir. Güvenli ve bilmemin tek yolu: allDay === 'true'? $ ('# even_allday_yn) .prop ("işaretlendi", doğru): $ (' # even_allday_yn) .prop ("işaretlendi", yanlış). Katı eşitlik operatörüne dikkat edin.
Brice Coustillas

1
$('#even_allday_yn').prop('checked', allDay === true)çünkü allDay === trueboolean bir sonuç verir.
leftclickben

58

Dostum aşağıdaki kodu deneyin:

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

VEYA

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

VEYA

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

26
KeyOfJ cevabında olduğu gibi, .prop('checked', true)yerine kullanın attr- Ben sadece aynı sorunla karşılaştı ve propçalışıyor.
semmelbroesel

3
Bilginize, :checkedsözde seçici veya diğer yerel onay kutusu HTML özelliklerini kullanmak istiyorsanız, kullanmanız gerekir .prop.
benastan

1
Bunu denedim ve işe yaramadı ama kodu $ ("div.row-form #estado_cat") olarak değiştirdiğimde. Prop ("ekose desenli", "ekose desenli"); işe yaradı. (Attr, pervane olarak değiştirildi).
Jim Evans

1
Ne yazık ki pervane jQuery 1.6 ve üstü, bu yüzden sizin için işe yaramayacak eski bir çerçeveye sıkışmışsanız
wolffer-east

.attr().prop()jQuery 1.6+ için önceki sürümlere geçmenin yolu .
vapcguy

26

"işaretli" özelliği, onay kutusunu olur olmaz işaretler. Bu nedenle, bir onay kutusunu işaretlemek / işaretini kaldırmak için özelliği ayarlamanız / işareti kaldırmanız gerekir.

Kutuyu işaretlemek için:

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

Kutunun işaretini kaldırmak için:

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

İşaretli durumu test etmek için:

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

Umarım yardımcı olur...


19

Kalıcı bir pencerede olduğunuzdan (dinamik veya sayfada olsun) hedefinize ulaşmak için aşağıdaki kodu kullanabilirsiniz: (Sitemde aynı soruna rastladım ve bu şekilde düzelttim)

HTML:

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

KODU:

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

Yukarıdaki "kendoWindow" benim pencere (benim dinamik, ama ben doğrudan sayfadaki bir öğeye eklerken de bunu). Herhangi bir satır KOPYA özniteliğine sahip olup olmadığını görmek için bir dizi veri ("queriesToAddToGroup") üzerinden döngü. Öyleyse, bir kullanıcı bu pencereden kaydettiğinde bu özniteliği ayarlayan pencerenin içindeki onay kutusunu açmak istiyorum.


4
Eldeki soruya verilen diğer cevapların "işe yarayabileceği", propancak bu cevabın önerdiği gibi kullanmanın dinamik jQuery onay kutusu kontrol / kontrol etmenin doğru yolu olduğu unutulmamalıdır .
Joshua Burns

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

Doğru ve yanlış tırnak içinde olmadığından emin olun.


1
Attr onay kutusunu işaretlemez, pervane bu kontrolü yapar. Beğen .prop('checked', true); Bu
yazıda

@casivaagustin jQuery sürümüne bağlıdır. .attr()Açıklandığı gibi jQuery 1.6'dan daha önce işe yaradığına inanıyorum .
vapcguy

5

Aşağıdaki kod gibi yazabilirsiniz.

HTML

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

jQuery

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

Umarım sizin için çalışır.


4

Bir GreaseMonkey betiğinin bir sayfadaki onay kutusunu otomatik olarak işaretlemesi için bu işlevi kullanmak istiyorsanız, işaretli özelliği ayarlamanın ilişkili eylemi tetiklemeyebileceğini unutmayın. Bu durumda, onay kutusunu "tıklatmak" muhtemelen mümkün olacaktır (ve işaretli özelliği de ayarlayacaktır).

$("#id").click()

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

Bul diziyi döndürür, bu nedenle yalnızca bir öğe olsa bile almak için [0] kullanın

eğer bul kullanmazsan o zaman

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

bu benim için Mozilla Firefox'ta işe yaradı


1
Bu işe
yarar, css'nizde


2

Muhtemelen jQuery UI kullandığınız için bunu deneyin (eğer değilse lütfen yorum yapın)

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

    }
   });

@ user2063626 - fonksiyon içindeki js kısmı cevabınızdan kopyalandı
user1428716

2

$("#estado_cat").checkboxradio("refresh")Onay kutunuzda yayınlamayı denediniz mi?


2

Bu çalışıyor.

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

2

Ben de bu problemle karşılaştım.

ve işte benim eski kod çalışmıyor

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

İşte şimdi benim yeni kod:

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

bu nedenle, kilit nokta çalışmadan önce, işaretli özelliğin var olduğundan ve kaldırılmadığından emin olun.


Çok daha basit:Jbookaccess.prop("checked", data.access != 'private');
Legionar

2

Bu çünkü sen jQuery en yeni sürümü ile oluşur attr('checked')getiri 'checked'ise prop('checked')getiriler true.


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>

Bu krom ve firefox iyi çalışıyor
reza akhlaghi

1

Kalıcı pencereyi yükledikten sonra onay kutusunu ayarlayın. Sayfayı yüklemeden önce onay kutusunu ayarladığınızı düşünüyorum.

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

1

Bunun bir Jquery çözümü istediğini biliyorum, ama sadece düz javascript'te bunu değiştirmenin çok kolay olduğuna işaret etsem de.

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

Mevcut ve gelecekteki tüm sürümlerde çalışacaktır.


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>

Kimliği ve özniteliği sırasıyla artırmayı unutmayın. Dinamik olarak eklenen önyükleme onay kutusu için.

$(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>');
    }
})
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.