casilla de verificación jquery set marcada

Ya probé todas las formas posibles, pero todavía no conseguí que funcionara. Tengo una ventana modal con un checkboxdeseo de que cuando se abra el modal, la checkboxcasilla de verificación o desmarque se base en un valor de base de datos. (Ya lo tengo trabajando con otros campos de formulario). Comencé a tratar de comprobarlo pero no funcionó.

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

y el jquery:

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

También probé con attr, y otros que se ven aquí en los foros, pero ninguno parece funcionar. ¿Alguien puede señalarme el camino correcto?

EDITAR: ok, realmente me falta algo aquí ... Puedo marcar / desmarcar usando código si la casilla de verificación está en la página, pero está en la ventana modal, no puedo. Intenté docenas de formas diferentes ...

Tengo un enlace que se supone que abre el modal:

y jquery para "escuchar" el clic y ejecutar algunas operaciones como llenar algunos cuadros de texto con datos provenientes de la base de datos. Todo funciona como quiero, pero el problema es que no puedo configurar la casilla de verificación marcada / desmarcada usando el código. ¡ayuda por favor!

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

tienes que usar la función 'prop':

.prop('checked', true);

Antes de jQuery 1.6 (ver la respuesta del usuario 2063626 ):

.attr('checked','checked')

Tomando todas las respuestas propuestas y aplicándolas a mi situación, tratando de marcar o desmarcar una casilla de verificación basada en un valor recuperado de verdadero (debería marcar la casilla) o falso (no debería marcar la casilla), intenté todo lo anterior y descubrió que usar .prop ("verificado", verdadero) y .prop ("verificado", falso ) eran la solución correcta.

Todavía no puedo agregar comentarios o respuestas, pero sentí que esto era lo suficientemente importante como para agregarlo a la conversación.

Aquí está el código de mano para una modificación de calendario completo que dice si el valor recuperado "allDay" es verdadero, luego marque la casilla de verificación con ID "even_allday_yn":

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

Amigo intente debajo del código:

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

O

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

O

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

El atributo "marcado" marca la casilla tan pronto como existe. Entonces, para marcar / desmarcar una casilla de verificación, debe activar / desactivar el atributo.

Para marcar la casilla:

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

Para desmarcar la casilla:

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

Para probar el estado verificado:

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

Espero eso ayude...

Como se encuentra en una ventana modal (ya sea dinámica o en la página), puede usar el siguiente código para lograr su objetivo: (Encontré el mismo problema en mi sitio y así es como lo solucioné)

HTML:

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

CÓDIGO:

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

En el "kendoWindow" anterior está mi ventana (la mía es dinámica, pero también hago esto cuando agrego un elemento directamente en la página). Estoy recorriendo una matriz de datos ("queriesToAddToGroup") para ver si alguna fila tiene un atributo de COPY. Si es así, quiero activar la casilla de verificación dentro de la ventana que establece ese atributo cuando un usuario guarda desde esta ventana.

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

funcionará Asegúrese de que verdadero y falso no estén entre comillas.

Puede escribir como el código dado a continuación.

HTML

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

jQuery

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

Espero que funcione para ti.

Si desea utilizar esta funcionalidad para un script de GreaseMonkey para marcar automáticamente una casilla de verificación en una página, tenga en cuenta que simplemente establecer la propiedad marcada puede no activar la acción asociada. En ese caso, "hacer clic" en la casilla de verificación probablemente sí (y establecer la propiedad marcada también).

$("#id").click()

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

Buscar devolverá la matriz, así que use [0] para obtener incluso si solo hay un elemento

si no usas find entonces

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

esto funcionó bien en Mozilla Firefox para mí

Trabajó para mi:

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

Intente esto ya que probablemente esté usando jQuery UI (si no, por favor comente)

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

    }
   });

¿Has intentado correr $("#estado_cat").checkboxradio("refresh")en tu casilla de verificación?

Esto funciona.

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

Encontré este problema también.

y aquí está mi viejo código no funciona

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

Aquí está mi nuevo código que funciona ahora:

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

Por lo tanto, el punto clave es antes de que funcione, asegúrese de que la propiedad marcada existe y no se ha eliminado.

Esto ocurre porque usted con la versión más nueva de jquery attr('checked')regresa 'checked'mientras prop('checked')regresa 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>

Establezca la casilla de verificación después de cargar la ventana modal. Creo que está configurando la casilla de verificación antes de cargar la página.

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

Sé que esto requiere una solución de Jquery, pero solo quiero señalar que es muy fácil alternar esto en JavaScript simple.

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

Funcionará en todas las versiones actuales y futuras.

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

Recuerde incrementar el atributo id y for respectivamente. Para la casilla de verificación Bootstrap añadida dinámicamente.

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