ตรวจสอบชุดทำเครื่องหมาย jquery

ฉันลองวิธีที่เป็นไปได้ทั้งหมดแล้ว แต่ก็ยังไม่ทำงาน ฉันมีหน้าต่าง modal ที่checkboxฉันต้องการให้เมื่อ modal เปิดขึ้นcheckboxเครื่องหมายถูกหรือ check ควรขึ้นกับค่าฐานข้อมูล (ฉันมีที่ทำงานกับเขตข้อมูลแบบฟอร์มอื่น ๆ แล้ว) ฉันเริ่มพยายามตรวจสอบ แต่ไม่ทำงาน

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>

และ jquery:

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

ฉันลองด้วยattrและคนอื่น ๆ ที่เห็นที่นี่ในฟอรัม แต่ดูเหมือนว่าจะไม่ทำงาน ใครช่วยชี้ทางที่ถูกต้องให้ฉันได้ไหม

แก้ไข: ตกลงฉันไม่มีอะไรที่นี่จริง ๆ ... ฉันสามารถทำเครื่องหมาย / ไม่เลือกโดยใช้รหัสได้หากช่องทำเครื่องหมายอยู่ในหน้า แต่อยู่ในหน้าต่างคำกริยาฉันไม่สามารถทำได้ ฉันลองหลายวิธี ...

ฉันมีลิงค์ที่ควรจะเปิดเป็นกิริยาช่วย:

และ jquery เพื่อ "ฟัง" การคลิกและดำเนินการบางอย่างเช่นการกรอกข้อมูลลงในกล่องข้อความที่มีข้อมูลที่มาจากฐานข้อมูล ทุกอย่างทำงานเหมือนที่ฉันต้องการ แต่ปัญหาคือฉันไม่สามารถตั้งค่าช่องทำเครื่องหมายที่เลือก / ไม่ถูกตรวจสอบโดยใช้รหัส ช่วยด้วย!

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

คุณต้องใช้ฟังก์ชั่น 'prop':

.prop('checked', true);

ก่อน jQuery 1.6 (ดูคำตอบของ user2063626 ):

.attr('checked','checked')

ใช้คำตอบที่เสนอทั้งหมดและนำไปใช้กับสถานการณ์ของฉัน - พยายามตรวจสอบหรือยกเลิกการเลือกช่องทำเครื่องหมายตามค่าที่ดึงมาของจริง (ควรทำเครื่องหมายในช่อง) หรือเท็จ (ไม่ควรทำเครื่องหมายในช่อง) - ฉันลองทำตามข้างบนทั้งหมด พบว่าการใช้. prop ("ตรวจสอบ", จริง)และ. prop ("ตรวจสอบ", เท็จ ) เป็นทางออกที่ถูกต้อง

ฉันยังไม่สามารถเพิ่มความคิดเห็นหรือตอบคำตอบได้ แต่ฉันรู้สึกว่านี่สำคัญพอที่จะเพิ่มในการสนทนา

นี่คือโค้ด longhand สำหรับการปรับเปลี่ยนปฏิทินแบบเต็มรูปแบบที่ระบุว่าค่าที่ดึงมา "allDay" เป็นจริงจากนั้นทำเครื่องหมายในช่องทำเครื่องหมายด้วย ID "even_allday_yn":

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

เพื่อนลองรหัสด้านล่าง:

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

หรือ

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

หรือ

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

"ตรวจสอบ" คุณลักษณะ 'ทำเครื่องหมาย' ช่องทำเครื่องหมายทันทีที่มันมีอยู่ ดังนั้นในการตรวจสอบ / ยกเลิกการเลือกช่องทำเครื่องหมายคุณจะต้องตั้งค่า / ยกเลิกการตั้งค่าคุณลักษณะ

สำหรับการตรวจสอบกล่อง:

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

สำหรับการยกเลิกการเลือกกล่อง:

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

สำหรับการทดสอบสถานะการตรวจสอบ:

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

หวังว่ามันจะช่วย ...

เนื่องจากคุณอยู่ในหน้าต่างโมดัล (ไม่ว่าจะเป็นแบบไดนามิกหรือในหน้า) คุณสามารถใช้รหัสต่อไปนี้เพื่อบรรลุเป้าหมาย: (ฉันพบปัญหาเดียวกันในเว็บไซต์ของฉันและนี่คือวิธีที่ฉันแก้ไข)

HTML:

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

รหัส:

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

ใน "kendoWindow" ด้านบนเป็นหน้าต่างของฉัน (ของฉันเป็นแบบไดนามิก แต่ฉันก็ทำเช่นนี้เมื่อผนวกเข้ากับองค์ประกอบโดยตรงในหน้า) ฉันวนลูปผ่านอาร์เรย์ของข้อมูล ("queryToAddToGroup") เพื่อดูว่าแถวใดมีแอตทริบิวต์ของ COPY ถ้าเป็นเช่นนั้นฉันต้องการเปิดช่องทำเครื่องหมายภายในหน้าต่างที่ตั้งค่าแอตทริบิวต์นั้นเมื่อผู้ใช้บันทึกจากหน้าต่างนี้

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

จะทำงานตรวจสอบให้แน่ใจว่าจริงและเท็จไม่อยู่ในเครื่องหมายคำพูด

คุณสามารถเขียนโค้ดด้านล่างได้

HTML

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

jQuery

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

หวังว่ามันจะทำงานให้คุณ

หากคุณต้องการใช้ฟังก์ชันนี้สำหรับสคริปต์ GreaseMonkey เพื่อทำเครื่องหมายในช่องทำเครื่องหมายหน้าโดยอัตโนมัติโปรดทราบว่าการตั้งค่าคุณสมบัติที่เลือกไว้อาจไม่ทำให้เกิดการกระทำที่เกี่ยวข้อง ในกรณีนี้ "คลิก" ช่องทำเครื่องหมายอาจจะ (และตั้งค่าคุณสมบัติที่ตรวจสอบด้วย)

$("#id").click()

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

Find จะส่งคืนอาร์เรย์ดังนั้นใช้ [0] เพื่อรับค่าแม้ว่าจะมีเพียงรายการเดียว

หากคุณไม่ได้ใช้ค้นหาแล้ว

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

ทำงานได้ดีใน Mozilla Firefox สำหรับฉัน

ทำงานให้ฉัน:

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

ลองทำเช่นนี้เพราะคุณกำลังใช้ jQuery UI อยู่ (หากไม่ใช่โปรดแสดงความคิดเห็น)

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

    }
   });

คุณลองใช้งาน$("#estado_cat").checkboxradio("refresh")กล่องกาเครื่องหมายของคุณหรือไม่

วิธีนี้ใช้ได้ผล

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

ฉันพบปัญหานี้ด้วย

และนี่คือรหัสเก่าของฉันไม่ทำงาน

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

นี่คือรหัสใหม่ของฉันที่ใช้งานได้ในขณะนี้:

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

ดังนั้นจุดสำคัญคือก่อนที่จะทำงานตรวจสอบให้แน่ใจว่าคุณสมบัติที่ตรวจสอบมีอยู่และไม่ได้ถูกลบออก

นี้เกิดขึ้นเพราะคุณกับรุ่นใหม่ล่าสุดของ jQuery attr('checked')ผลตอบแทน'checked'ในขณะที่ผลตอบแทนprop('checked')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>

ตั้งค่าเช็กบ็อกซ์หลังจากโหลดหน้าต่างโมดัล ฉันคิดว่าคุณกำลังตั้งค่าช่องทำเครื่องหมายก่อนที่จะโหลดหน้า

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

ฉันรู้ว่าสิ่งนี้ถามถึงวิธีการแก้ปัญหา Jquery แต่ฉันแค่ชี้ให้เห็นว่ามันง่ายมากที่จะสลับใน javascript ธรรมดา

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

มันจะทำงานในเวอร์ชันปัจจุบันและอนาคตทั้งหมด

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

อย่าลืมเพิ่ม ID และแอตทริบิวต์ตามลำดับ สำหรับกล่องกาเครื่องหมาย bootstrap ที่เพิ่มเข้ามาแบบไดนามิก

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