casella di controllo set jquery selezionata


479

Ho già provato tutti i modi possibili, ma non riuscivo ancora a farlo funzionare. Ho una finestra modale con un checkboxvoglio che quando si apre il modale, il checkboxsegno di spunta o deselezionare dovrebbe essere basato su un valore di database. (Ho già lavorando con altri campi modulo.) Ho iniziato a provare a farlo controllare ma non ha funzionato.

Il mio 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 il jquery:

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

Ho anche provato con attr, e altri visti qui nei forum, ma nessuno sembra funzionare. Qualcuno può indicarmi la strada giusta?

EDIT: ok, mi manca davvero qualcosa qui ... Posso selezionare / deselezionare usando il codice se la casella di controllo è nella pagina, ma è nella finestra modale, non posso. Ho provato dozzine di modi diversi ...

Ho un link che dovrebbe aprire il modale:

e jquery per "ascoltare" il clic ed eseguire alcune operazioni come riempire alcune caselle di testo con i dati provenienti dal database. Tutto funziona come voglio, ma il problema è che non posso impostare la casella di controllo selezionata / deselezionata usando il codice. aiuto per favore!

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

quale classe viene applicata sul div modale quando il modale si apre? Inoltre, come si controlla il valore del database - Utilizzando AJAX o è già pre-recuperato e memorizzato in una variabile?
user1428716

imposta la casella di controllo dopo aver caricato la finestra modale Penso che stai impostando la casella di controllo prima di caricare la finestra modale. $ ( '# fModal') modale ( 'show').; $ ( "# estado_cat") attr ( "controllato", "controllato.");
Vineeth Bhaskaran,

Risposte:


805

devi usare la funzione 'prop':

.prop('checked', true);

Prima di jQuery 1.6 (vedi la risposta dell'utente2063626 ):

.attr('checked','checked')

5
Sembra che tu abbia la risposta corretta. Potresti elaborare? stackoverflow.com/a/5876747/29182
Ziggy

1
Questo è buono a sapersi. È trascurato questo quando si esamina la documentazione sulla migrazione di jQuery 3.3.x
reaper_unique,

1
Buono a sapersi che non è possibile utilizzare l'attrazione nelle nuove versioni di jQuery come inizialmente pensavo
Kaloyan,

75

Prendendo tutte le risposte proposte e applicandole alla mia situazione - cercando di selezionare o deselezionare una casella di controllo in base a un valore recuperato true (dovrebbe selezionare la casella) o false (non selezionare la casella) - Ho provato tutto quanto sopra e trovato che usare .prop ("controllato", vero) e .prop ("controllato", falso ) erano la soluzione corretta.

Non riesco ancora ad aggiungere commenti o risposte, ma ho ritenuto che questo fosse abbastanza importante da aggiungere alla conversazione.

Ecco il codice longhand per una modifica fullcalendar che indica se il valore recuperato "allDay" è vero, quindi selezionare la casella di controllo con ID "even_allday_yn":

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

48
Perché non solo su una sola riga? $( "#even_allday_yn").prop('checked', allDay);
Xavier Hayoz,

3
Stava cercando di dimostrare i possibili valori. Come faresti a conoscere il vero valore di "allDay" senza un esempio come questo qui?
Soroush Falahati,

1
@Xavier Hayoz. Funziona se, e solo se, allDay restituisce 'vero' o 'falso' come valore letterale, non puro binario. Le caselle di controllo sono progettate in modo errato in HTML e il loro stato verificato può essere espresso in modi molto diversi. Il solo e sicuro modo in cui conosco è: allDay === "vero"? $ ('# even_allday_yn) .prop ("checked", true): $ (' # even_allday_yn) .prop ("checked", false). Si noti l'operatore di uguaglianza rigorosa.
Brice Coustillas,

1
$('#even_allday_yn').prop('checked', allDay === true)funzionerà perché allDay === truefornisce un risultato booleano.
leftclickben

58

Amico prova sotto il codice:

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

26
Come nella risposta di KeyOfJ, usa .prop('checked', true)invece di attr- Ho appena incontrato lo stesso problema e propfunziona.
Semmelbroesel,

3
Cordiali saluti, se si desidera utilizzare lo :checkedpseudo-selettore o altre funzionalità HTML di casella di controllo nativa, è necessario utilizzare .prop.
Benastan,

1
Ho provato questo e non ha funzionato ma quando ho cambiato il codice in $ ("div.row-form #estado_cat"). Prop ("controllato", "controllato"); ha funzionato. (Modificato attr per prop).
Jim Evans

1
Purtroppo prop è jQuery 1.6 e versioni successive, quindi se sei bloccato in un framework legacy che non funzionerà per te
wolffer-east

.attr()è la strada da percorrere per le versioni precedenti, .prop()per jQuery 1.6+.
vapcguy,

26

l'attributo "controllato" 'spunta' la casella non appena esiste. Quindi per selezionare / deselezionare una casella di controllo devi impostare / deselezionare l'attributo.

Per selezionare la casella:

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

Per deselezionare la casella:

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

Per testare lo stato verificato:

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

Spero che sia d'aiuto...


19

Dato che sei in una finestra modale (dinamica o nella pagina) puoi utilizzare il seguente codice per raggiungere il tuo obiettivo: (Ho riscontrato lo stesso problema sul mio sito ed è così che l'ho risolto)

HTML:

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

CODICE:

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

In "kendoWindow" sopra è la mia finestra (la mia è dinamica, ma lo faccio anche quando accedo a un elemento direttamente nella pagina). Sto eseguendo il ciclo continuo di una serie di dati ("queriesToAddToGroup") per vedere se alcune righe hanno un attributo di COPY. In tal caso, desidero attivare la casella di controllo all'interno della finestra che imposta tale attributo quando un utente salva da questa finestra.


4
Va notato che mentre altre risposte alla domanda in corso possono "funzionare", usare propcome suggerisce questa risposta è il modo CORRETTO di realizzare il controllo / deselezione della casella di controllo dinamica di jQuery.
Joshua Burns,

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

funzionerà. Assicurati che vero e falso non siano tra virgolette.


1
Attr non spunta la casella, prop è quello che fa il controllo. Mi piace .prop('checked', true); Altre informazioni in questo post
casivaagustin

@casivaagustin Dipende dalla versione jQuery. Credo che prima di jQuery 1.6 .attr()funzionasse, come descritto.
vapcguy,

5

Puoi scrivere come sotto il codice indicato.

HTML

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

jQuery

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

Spero che funzioni per te.


4

Se si desidera utilizzare questa funzionalità per uno script GreaseMonkey per selezionare automaticamente una casella di controllo in una pagina, tenere presente che la semplice impostazione della proprietà selezionata potrebbe non attivare l'azione associata. In tal caso, "facendo clic" sulla casella di controllo probabilmente (e imposta anche la proprietà selezionata).

$("#id").click()

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

Trova restituirà l'array, quindi usa [0] per ottenere anche se c'è solo un elemento

se non usi trova allora

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

questo ha funzionato bene in Mozilla Firefox per me


1
Funziona, tutte le altre soluzioni non vengono rilevate se hai uno: stile controllato nel tuo css
bhappy


2

Prova questo dal momento che stai probabilmente utilizzando l'interfaccia utente di jQuery (in caso contrario, commenta)

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

    }
   });

@utente2063626 - la parte della js all'interno della funzione viene copiata dalla tua risposta
user1428716

2

Hai provato a correre $("#estado_cat").checkboxradio("refresh")sulla tua casella?


2

Questo funziona

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

2

Ho riscontrato anche questo problema.

ed ecco il mio vecchio codice non funziona

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

ecco il mio nuovo codice che ora funziona:

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

quindi, il punto chiave è prima che funzionasse, assicurarsi che la proprietà selezionata esista e non sia stata rimossa.


Molto più semplice:Jbookaccess.prop("checked", data.access != 'private');
Legionar

2

Ciò si verifica perché l'utente con la versione più recente di jquery attr('checked')restituisce 'checked'mentre prop('checked')restituisce 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>

questo funziona bene in Chrome e Firefox
Reza Akhlaghi,

1

Impostare la casella di controllo dopo aver caricato la finestra modale. Penso che tu stia impostando la casella di controllo prima di caricare la pagina.

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

1

So che questo richiede una soluzione Jquery, ma ho solo fatto notare che è molto facile attivarlo in javascript.

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

Funzionerà in tutte le versioni attuali e future.


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>

Ricorda di incrementare l'id e l'attributo rispettivamente. Per la casella di controllo Bootstrap aggiunta dinamicamente.

$(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>');
    }
})
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.