caixa de seleção jquery set marcada

Eu já tentei de todas as maneiras possíveis, mas ainda não consegui. Eu tenho uma janela modal com um checkboxEu quero que quando o modal for aberto, a checkboxseleção ou desmarque deve basear-se em um valor do banco de dados. (Já tenho que trabalhar com outros campos de formulário.) Comecei a tentar verificá-lo, mas não funcionou.

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

e o jquery:

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

Eu também tentei com attr, e outros vistos aqui nos fóruns, mas nenhum parece funcionar. Alguém pode me indicar o caminho certo?

EDIT: ok, estou realmente faltando algo aqui ... Posso marcar / desmarcar usando código se a caixa de seleção estiver na página, mas está na janela modal, não posso. Eu tentei dezenas de maneiras diferentes ...

Eu tenho um link que deveria abrir o modal:

e jquery para "ouvir" o clique e executar algumas operações como preencher algumas caixas de texto com dados provenientes do banco de dados. Tudo funciona como eu quero, mas o problema é que não consigo marcar a caixa de seleção marcada / desmarcada usando o código. ajuda 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;
    });     
});

você precisa usar a função 'prop':

.prop('checked', true);

Antes do jQuery 1.6 (consulte a resposta do usuário2063626 ):

.attr('checked','checked')

Tomando todas as respostas propostas e aplicando-as à minha situação - tentando marcar ou desmarcar uma caixa de seleção com base em um valor recuperado de true (deve marcar a caixa) ou false (não deve marcar a caixa) - tentei todas as opções acima e descobriu que o uso de .prop ("marcado", verdadeiro) e .prop ("marcado", falso ) era a solução correta.

Ainda não consigo adicionar comentários ou respostas, mas achei que isso era importante o suficiente para aumentar a conversa.

Aqui está o código à mão para uma modificação de calendário completo que diz se o valor recuperado "allDay" é verdadeiro e marque a caixa de seleção com o ID "even_allday_yn":

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

Cara tente abaixo do código:

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

OU

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

OU

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

O atributo "marcado" marca a caixa de seleção assim que existe. Portanto, para marcar / desmarcar uma caixa de seleção, você deve definir / desabilitar o atributo.

Para marcar a caixa:

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

Para desmarcar a caixa:

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

Para testar o status verificado:

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

Espero que ajude...

Como você está em uma janela modal (dinâmica ou na página), pode usar o seguinte código para atingir seu objetivo: (Encontrei o mesmo problema no meu site e foi assim que o corrigi)

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

No "kendoWindow" acima, está minha janela (a minha é dinâmica, mas também faço isso ao anexar um elemento diretamente na página). Estou percorrendo uma matriz de dados ("queriesToAddToGroup") para ver se alguma linha tem um atributo de COPY. Nesse caso, desejo ativar a caixa de seleção dentro da janela que define esse atributo quando um usuário salva dessa janela.

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

verifique se true e false não estão entre aspas.

Você pode escrever como no código abaixo.

HTML

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

jQuery

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

Espero que funcione para você.

Se você deseja usar essa funcionalidade para um script GreaseMonkey para marcar automaticamente uma caixa de seleção em uma página, lembre-se de que simplesmente definir a propriedade marcada pode não acionar a ação associada. Nesse caso, "clicar" na caixa de seleção provavelmente irá (e definir a propriedade marcada também).

$("#id").click()

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

Find retornará array, então use [0] para obter o mesmo que exista apenas um item

se você não usar find, então

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

isso funcionou bem no Mozilla Firefox para mim

Trabalhou para mim:

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

Tente isso, pois você provavelmente está usando a interface do usuário do jQuery (se não, 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');

    }
   });

Você já tentou rodar $("#estado_cat").checkboxradio("refresh")na sua caixa de seleção?

Isso funciona.

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

Eu também encontrei esse problema.

e aqui está o meu código antigo não funciona

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

Aqui está o meu novo código que é trabalhado agora:

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

portanto, o ponto principal é antes de funcionar, verifique se a propriedade marcada existe e não foi removida.

Isso ocorre porque você, com a versão mais recente do jquery, attr('checked')retorna 'checked'enquanto prop('checked')retorna 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>

Marque a caixa de seleção após carregar a janela modal. Acho que você está definindo a caixa de seleção antes de carregar a página.

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

Eu sei que isso pede uma solução Jquery, mas eu gostaria de salientar que é muito fácil alternar isso em javascript simples.

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

Ele funcionará em todas as versões atuais e 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>

Lembre-se de incrementar o id e o atributo, respectivamente. Na caixa de seleção Inicialização dinamicamente adicionada.

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