631 Stimmen

jQuery set checkbox checked

Ich habe schon alle Möglichkeiten ausprobiert, aber es hat immer noch nicht geklappt. Ich habe ein modales Fenster mit einer checkbox Ich möchte, dass beim Öffnen des Modals, die checkbox Die Prüfung sollte auf einem Datenbankwert basieren. (Ich habe, dass bereits mit anderen Formularfeldern arbeiten.) Ich begann zu versuchen, um es zu überprüfen, aber es hat nicht funktioniert.

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

und die jQuery:

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

Ich habe es auch mit attr und andere, die hier in den Foren zu finden sind, aber keine scheint zu funktionieren.
Kann mir jemand den richtigen Weg zeigen?


EDITAR

OK, ich habe hier wirklich etwas übersehen. Ich kann das Kontrollkästchen mit Code aktivieren/deaktivieren, wenn es sich auf der Seite befindet, aber wenn es sich in der modal Fenster, kann ich nicht. Ich habe Dutzende von verschiedenen Möglichkeiten ausprobiert.

Ich habe einen Link, der das Modal öffnen soll:

<a href='#' data-id='".$row['id_cat']."' class='editButton icon-pencil'></a>

und jQuery zu "hören" den Klick und führen einige Operationen wie Füllen einige Textfelder mit Daten aus der Datenbank kommen. Alles funktioniert, wie ich will, aber das Problem ist, dass ich nicht setzen kann Checkbox aktiviert/deaktiviert mit Code. Bitte um Hilfe!

$(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 it's unchecked by default)
            // and it does not work
            $("#estado_cat").prop("checked", true);
            $('#fModal').modal('show');
        });

        evt.preventDefault();
        return false;
    });
});

1035voto

singe Batteur Punkte 10359

Müssen Sie die Funktion "prop" verwenden:

.prop('checked', true);

Vor jQuery 1.6 (siehe Antwort von user2063626 ) :

.attr('checked','checked')

93voto

eriknoyes Punkte 939

Wenn ich alle vorgeschlagenen Antworten auf meine Situation anwende - ich versuche, ein Kontrollkästchen auf der Grundlage eines abgerufenen Werts von true (das Kästchen sollte aktiviert werden) oder false (das Kästchen sollte nicht aktiviert werden) zu aktivieren oder zu deaktivieren - habe ich alle oben genannten Möglichkeiten ausprobiert und festgestellt, dass die Verwendung von .prop("checked", true) y .prop("checked", false ) waren die richtige Lösung.

Ich kann noch keine Kommentare oder Antworten hinzufügen, aber ich hielt dies für wichtig genug, um zur Diskussion beizutragen.

Hier ist der Langschriftcode für eine vollständige Kalenderänderung, die besagt, dass, wenn der abgefragte Wert "allDay" wahr ist, das Kontrollkästchen mit der ID "even_allday_yn" aktiviert wird:

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

90voto

Probieren Sie den folgenden Code aus:

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

OR

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

OR

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

32voto

shadock Punkte 406

Das Attribut "checked" aktiviert das Kontrollkästchen, sobald es existiert. Um also ein Kontrollkästchen zu aktivieren/deaktivieren, müssen Sie das Attribut setzen/entfernen.

Zum Ankreuzen des Kästchens:

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

Zum Deaktivieren des Kontrollkästchens:

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

Zur Prüfung des geprüften Status:

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

Ich hoffe, es hilft...

22voto

KeyOfJ Punkte 663

Da Sie sich in einem modalen Fenster befinden (ob dynamisch oder in der Seite), können Sie den folgenden Code verwenden, um Ihr Ziel zu erreichen: (Ich hatte das gleiche Problem auf meiner Website und habe es so gelöst)

HTML:

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

CODE:

$.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 der obigen Abbildung ist "kendoWindow" mein Fenster (meins ist dynamisch, aber ich mache das auch, wenn ich an ein Element direkt in der Seite anhänge). Ich bin Schleife durch ein Array von Daten ("queriesToAddToGroup"), um zu sehen, wenn alle Zeilen ein Attribut von COPY haben. Wenn ja, möchte ich das Kontrollkästchen im Fenster aktivieren, das dieses Attribut setzt, wenn ein Benutzer aus diesem Fenster speichert.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X