Deaktivieren des Kontrollkästchens mithilfe der jQuery Uniform-Bibliothek

144

Ich habe ein Problem mit dem Deaktivieren von a checkbox. Schauen Sie sich meine jsFiddle an , wo ich versuche:

   $("#check2").attr("checked", true);

Ich benutze Uniform für das Styling checkboxund es funktioniert einfach nicht zu / deaktivieren Sie überprüfen das checkbox.

Irgendwelche Ideen?

Upvote
quelle
sowohl in Google Chrome als auch in Firefox funktioniert es nicht für mich
Upvote

Antworten:

108

Wenn sie sich ihre Dokumente ansehen, haben sie eine $.uniform.updateFunktion zum Aktualisieren eines "uniformierten" Elements.

Beispiel: http://jsfiddle.net/r87NH/4/

$("input:checkbox").uniform();

$("body").on("click", "#check1", function () {
    var two = $("#check2").attr("checked", this.checked);
    $.uniform.update(two);
});
user113716
quelle
5
@mkoryak: Funktioniert einwandfrei 1.4.4, aber die Links zu den js- und css-Dateien waren fehlerhaft. Hier ist eine aktualisierte Geige. Wenn Sie meinen, dass es Probleme speziell in gibt 1.6, dann ist das wahrscheinlich wahr, da jQuery das Verhalten von geändert und dann zurückgesetzt hat .attr(). Mit 1.6oder höher sollten Sie wirklich verwenden .prop().
user113716
Ich kann überhaupt keinen Unterschied zwischen der aktualisierten jsFiddle und dem Original feststellen (bis hin zur falschen Kennzeichnung von Kontrollkästchen 2), außer dass die aktualisierte Version für mich funktioniert und das Original nicht!?!?
iPadDeveloper2011
Übrigens sehen all diese pixelgezeichneten Uniformformen auf der Netzhaut sehr unsexy aus.
inkarniert
hat bei mir auch nicht funktioniert jsfiddle funktioniert nicht oder ist verwirrend
matthy
367

Eine einfachere Lösung besteht darin, dies zu tun, anstatt Uniform zu verwenden:

$('#check1').prop('checked', true); // will check the checkbox with id check1
$('#check1').prop('checked', false); // will uncheck the checkbox with id check1

Dies löst keine definierte Klickaktion aus.

Sie können auch verwenden:

$('#check1').click(); // 

Dadurch wird das Kontrollkästchen für das Kontrollkästchen aktiviert / deaktiviert, aber es wird auch jede von Ihnen definierte Klickaktion ausgelöst. Also sei vorsichtig.

EDIT : jQuery 1.6 + Anwendungenprop() nicht attr()für Kontrollkästchen aktiviert Wert

Mr.Hunt
quelle
2
Dadurch bleibt das überprüfte Attribut für mich unverändert in jQuery 1.7.1. Funktioniert, tut aber nicht das, was Sie denken.
2rs2ts
24
$("#chkBox").attr('checked', false); 

Dies hat bei mir funktioniert. Dadurch wird das Kontrollkästchen deaktiviert. Auf die gleiche Weise können wir verwenden

$("#chkBox").attr('checked', true); 

um das Kontrollkästchen zu aktivieren.

user1683014
quelle
4
Ich denke, es ist besser, die .prop () -Funktion anstelle von .attr () zu verwenden. Sonst funktioniert es nicht immer wie erwartet ...
Simon Steinberger
13

Wenn Sie Uniform 1.5 verwenden, verwenden Sie diesen einfachen Trick, um das Kontrollattribut hinzuzufügen oder zu entfernen. Fügen Sie
einfach den Wert = "check" in das Eingabefeld Ihres Kontrollkästchens ein.
Fügen Sie diesen Code in uniform.js> function doCheckbox(elem){>.click(function(){

if ( $(elem+':checked').val() == 'check' ) {
    $(elem).attr('checked','checked');           
}
else {
    $(elem).removeAttr('checked');
}   

Wenn Sie in Ihrem Eingabefeld nicht value = "check" hinzufügen möchten, weil Sie in einigen Fällen zwei Kontrollkästchen hinzufügen, verwenden Sie diese Option

if ($(elem).is(':checked')) {
 $(elem).attr('checked','checked');
}    
else
{    
 $(elem).removeAttr('checked');
}

Wenn Sie Uniform 2.0 verwenden, verwenden Sie diesen einfachen Trick, um das Prüfattribut
in dieser classUpdateChecked($tag, $el, options) {Funktionsänderung hinzuzufügen oder zu entfernen

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
}

Zu

if ($el.prop) {
    // jQuery 1.6+
    $el.prop(c, isChecked);
    if (isChecked) {
        $el.attr(c, c);
    } else {
        $el.removeAttr(c);
    }

}
Sohail Ahmed
quelle
7
$('#check1').prop('checked', true).uniform(); 
$('#check1').prop('checked', false).uniform(); 

Das hat bei mir funktioniert.

Parijat
quelle
Vielen Dank. Ich kann bestätigen, dass dies die einfachste Lösung ist.
Rudolph Opperman
2

Mach das einfach:

$('#checkbox').prop('checked',true).uniform('refresh');
Moledet
quelle
1

Sie müssen aufrufen, $.uniform.update()wenn Sie das Element mit Javascript aktualisieren, wie in der Dokumentation erwähnt.

Adeel
quelle
1

Erstens checkedkann es einen Wert von checkedoder eine leere Zeichenfolge haben.

$("input:checkbox").uniform();

$('#check1').live('click', function() {
    $('#check2').attr('checked', 'checked').uniform();
});
nyuszika7h
quelle
Es ist nichts Falsches daran, einen Booleschen Wert als Wert von zu übergeben checked.
user113716
Wir schreiben jedoch kein HTML-Markup. Wir setzen eine Eigenschaft auf die HTMLInputElement. Schauen Sie sich die checkedImmobilie an.
user113716
Egal
Das Übergeben eines booleschen Werts wird nur in Version 1.6+ unterstützt. Zuvor mussten Sie das geprüfte Attribut auf "geprüft" setzen oder entfernen.
Mkoryak
1

In einigen Fällen können Sie Folgendes verwenden:

$('.myInput').get(0).checked = true

Zum Umschalten können Sie if else mit Funktion verwenden

Larionov Nikita
quelle
1

 $("#checkall").change(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", true).uniform();
                });
            } else {
                $(".custom-checkbox").each(function () {
                    $(this).prop("checked", false).uniform();
                });
            }
        });

        // Changing state of CheckAll custom-checkbox
        $(".custom-checkbox").click(function () {
            if ($(".custom-checkbox").length == $(".custom-checkbox:checked").length) {
                $("#chk-all").prop("checked", true).uniform();
            } else {
                $("#chk-all").removeAttr("checked").uniform();
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id='checkall' /> Select All<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="PHP"> PHP<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="AngularJS"> AngularJS<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Python"> Python<br/>
 <input type="checkbox" class='custom-checkbox' name="languages" value="Java"> Java<br/>

P. Mondal
quelle
0

Der andere Weg ist,

verwenden $('#check2').click();

Dies führt dazu, dass Uniform das Kontrollkästchen aktiviert und die Masken aktualisiert

Hagelholz
quelle
-1

Kontrollkästchen, das sich wie Radio BTN verhält

$(".checkgroup").live('change',function() { var previous=this.checked; $(".checkgroup).attr("checked", false); $(this).attr("checked", previous); });

RaDo
quelle