web-dev-qa-db-de.com

Ändern des Status eines Switchery-Kontrollkästchens aus Code

Wie ändere ich den Status eines Kontrollkästchens jQuery Switchery programmgesteuert von aktiviert auf deaktiviert (und umgekehrt)?

Ich habe versucht, global_switch_sound.prop('checked', true) für das Kontrollkästchenelement zu verwenden, aber es funktioniert nicht.

HTML:

<input id="sound-active-input" type="checkbox"  />

JavaScript:

 global_switch_sound = new Switchery(document.querySelector('#sound-active-input'));
27
Idan Shechter

Versuche dies:

$('.switchery').click();

Es sollte ein Klicken und Wechseln auslösen ..__ ODER:

$('.switchery').trigger('click');
39
Rickert

Wenn jemand wie ich ist und eine Lösung gesucht hat, die über das DOM hinausgeht. Die folgende Funktion verwendet das Switchery-Objekt und einen Booleschen Wert, um anzugeben, ob der Schalter aktiviert oder deaktiviert werden soll (true/false):

function setSwitchery(switchElement, checkedBool) {
    if((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
        switchElement.setPosition(true);
        switchElement.handleOnchange(true);
    }
}

Verwendungsbeispiel:

var mySwitch = new Switchery($('#mySwitchCheck')[0], {
            size:"small",
            color: '#0D74E9'
        });
//Checks the switch
setSwitchery(mySwitch, true);
//Unchecks the switch
setSwitchery(mySwitch, false);

Hoffe das hilft jemand anderem

24
Tom G

Zunächst müssen Sie alle Switches während der Initialisierung in einem Array speichern

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
    switchery[html.getAttribute('id')] = new Switchery(html);
});

und erstellen Sie eine lokale Funktion, um den Schalter wie folgt umzuschalten

toggleSwitchery(id)
{
    var s = switchery[id];
    s.setPosition(true);
    s.handleOnchange(true);
}

das hat für mich funktioniert. Wenn Sie mit einem UI-Problem konfrontiert sind, d. H. Der Schalter verschiebt einige zusätzliche Pixel, öffnen Sie dann switchery.js und ersetzen Sie jack.offsetWidth durch 30 in Switchery.prototype.setPosition Funktion

4
Aamir Syed

Versuche dies:

function changeSwitchery(element, checked) {
  if ( ( element.is(':checked') && checked == false ) || ( !element.is(':checked') && checked == true ) ) {
    element.parent().find('.switchery').trigger('click');
  }
}

Verwendungsbeispiel:

var element = $('#sound-active-input');
changeSwitchery(element, false);
4
Pedro Soares
function toggleSwitch(switch_elem, on) {
    if (on){ // turn it on
        if ($(switch_elem)[0].checked){ // it already is so do 
            // nothing
        }else{
            $(switch_elem).trigger('click').attr("checked", "checked"); // it was off, turn it on
        }
    }else{ // turn it off
        if ($(switch_elem)[0].checked){ // it's already on so 
            $(switch_elem).trigger('click').removeAttr("checked"); // turn it off
        }else{ // otherwise 
            // nothing, already off
        }
    }
}

anrufen mit

toggleSwitch("#switch_element", true);
toggleSwitch("#switch_element", false);

Benötigt Fehlerüberprüfung und -sachen, funktioniert jedoch gut, erfordert jQuery und wird auf Switchery 0.8.1 getestet, das mit einem vorgefertigten Thema geliefert wurde, das ich bereits verwendet habe (Altair Admin)

3
Hugo Rune

So einfach mit Ihrer Checkbox-ID festgelegt,

$('#sound-active-input').prop('checked', true);

DEMO http://jsfiddle.net/yeyene/VHZY8/2/

2
yeyene

Kombiniert ein paar Antworten, arbeitet mit v0.8.2

    function setSwitchery(switchElement, checkedBool) {
        if (checkedBool && !switchElement.checked) { // switch on if not on
            $(switchElement).trigger('click').attr("checked", "checked");
        } else if (!checkedBool && switchElement.checked) { // switch off if not off
            $(switchElement).trigger('click').removeAttr("checked");
        }
    }

Verwendungsbeispiel:

var switchElement = $('#mySwitchInput');
setSwitchery(switchElement, false);
1
Josh

Für die AngularJS-Version ist die uiSwitch-Direktive unvollständig, um dies zu unterstützen. Sie müssen einen $ -formatierer für das ngModel in der uiSwitch-Direktive hinzufügen, der den Switcher-Wert aktualisiert.

ngModel.$formatters.Push(function(value) {

    $timeout(function() {

        ngModel.$setViewValue(value);
        switcher.setPosition(value);

    });

});

Bei dieser Aktualisierung wird das Modell in Ihrem Code in der UI-Switch-Direktive wiedergegeben.

JSFiddle Demo

0
pcasme
    $('selector').click(function () {
        $("selector").toggle(this.checked);
    });


if you are using jquery version <1.6

use this 
$('#checkMeOut').attr('checked');
0
Jero

Wenn Sie alle Switchery-Kontrollkästchen aktivieren bzw. deaktivieren müssen, lautet die Lösung mit JQuery:

$( '.js-switches' ).each( function() {
// for checking
    if ( !this.checked ) $( this ).trigger( 'click' );
// for unchecking
    if ( this.checked ) $( this ).trigger( 'click' );
} );

ich hoffe es hilft.

0
Özkan Azazi

Ich habe die Lösung von einem nativen Github-Problem-Tracker gefunden. Hier ist das Arbeitsbeispiel: http://jsfiddle.net/3am89/

Dies ist der Code, den Sie hinzufügen und manuell aufrufen müssen, um die Schaltfläche erneut zu rendern:

function onChange(el) {
    if (typeof Event === 'function' || !document.fireEvent) {
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        el.dispatchEvent(event);
    } else {
        el.fireEvent('onchange');
    }
}

Das Problem, das dieses Szenario beschreibt, ist https://github.com/abpetkov/switchery/issues/27

0
Amit Shah

Ich bin nicht sicher, ob Sie eine Lösung für dieses Problem gefunden haben, da auch ich das gleiche Problem hatte und nachdem Sie Ihre Diskussion mit @Rickdep durchgelesen hatten, obwohl er Ihnen nicht helfen konnte (obwohl die von ihm veröffentlichte Lösung ein Häkchen hat it), ihr habt mich in die richtige Richtung gezeigt und ich konnte eine Lösung finden, also danke. Wie auch immer, hier ist die Lösung, die ich gefunden habe. 

Zuerst müssen Sie den Klassensatz verwenden, der für das span-Element festgelegt ist, das Sie mit switchery.js erstellen, für Ihr $ ('. Class'). Click (); Funktion: So sieht zum Beispiel die Spannweite, die in meiner Lösung erzeugt wird, so aus:

<span class="switcher-questionnaire" style="border-color: rgb(121, 186, 97); box-shadow: rgb(121, 186, 97) 0px 0px 0px 16px inset; transition: border 0.7s, box-shadow 0.7s, background-color 2.0999999999999996s; -webkit-transition: border 0.7s, box-shadow 0.7s, background-color 2.0999999999999996s; background-color: rgb(121, 186, 97);">

<small style="left: 50px; transition: left 0.35s; -webkit-transition: left 0.35s;"></small>

</span>

Da die Klasse, die ich switchery.js sage, in dieser Lösung "Switcher-Fragebogen" zu generieren, ist dies die Klasse, die ich in meiner Klick-Funktion verwenden möchte. Diese sieht folgendermaßen aus:

$('.switcher-questionnaire').click( function() {
        if ($(this).children('small').css("left") === '50px') {
            $('.questionnaire-overlay').show();
        } else {
            $('.questionnaire-overlay').hide();
        }
        console.log('Clicked');
});

Für meine Lösung wollte ich in der Lage sein, die Option zum Ausblenden und Anzeigen einer Überlagerungsebene zu verwenden, die den Zugriff auf den angegebenen Inhalt deaktiviert, den der Benutzer anzeigt, wenn der Benutzer feststellt, dass der Abschnitt "nicht zutreffend" ist. Da switchery.js das Kontrollkästchen verbirgt und dieses Kontrollkästchen durch einen Bereich ersetzt, der den von Apple gewünschten Schalter schafft, den wir alle wollen, aber da switchery.js den aktivierten/deaktivierten Status des ausgeblendeten Kontrollkästchens nicht wirklich ändert, können Sie keine Option verwenden boolesche Anweisung, die aktiv gegen das Attribut "checked" geprüft wird. Dies ist der Fall. Die wichtigste Änderung, die ich beim Umschalten bemerkt habe, ist die Änderung der linken Position des 'kleinen' Elements von 50px auf 0px, wenn darauf geklickt wird:

<small style="left: 50px; transition: left 0.35s; -webkit-transition: left 0.35s;"></small>

Ich wählte dies als etwas, das ich als boolesche Lösung verwenden würde, um mit ein wenig jQuery's magischer Soße nachzusehen. 

Ich bin in Sachen Programmierung ziemlich verrückt, aber ich dachte, es wäre hilfreich, wenn ich einige meiner Gedanken bei der Lösung dieses Problems erläutern würde.

0
user3517582

Überprüfen Sie bitte das!

function changeSwitch(sltor,active) {
    var check = $(sltor).get(0);
    if ( (!check.checked && active) || (check.checked && !active) ){
        $(check).next('span').trigger('click')
    }
}
changeSwitch('.onlyOnThisDate',false);

versuche dies:

function changeSwitch(switch_id,active) {
    var check = document.querySelector(switch_id);
    //console.log("check",switch_id,check.checked,"to",active);
    if ( !check.checked && active ){
        var c = $(check).next('span').attr("class").replace("switchery ","");
        var l = {"switchery-large":"26px","switchery-small":"13px","switchery-default":"20px"}; 
        $(check).prop("checked",true).next('span').attr("style","box-shadow: rgb(38, 185, 154) 0px 0px 0px 16px inset; border-color: rgb(38, 185, 154); background-color: rgb(38, 185, 154); transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;").find('small').attr("style","left: "+l[c]+"; transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);");
    }else if ( check.checked && !active ){
        $(check).prop("checked",false).next('span').attr("style","box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; border-color: rgb(223, 223, 223); background-color: rgb(255, 255, 255); transition: border 0.4s, box-shadow 0.4s;").find('small').attr("style","left: 0px; transition: background-color 0.4s, left 0.2s;");
    }
}

changeSwitch(".js-switch",true);

Wenn Sie versuchen, dieses Formular zurückzusetzen, verwenden Sie es zuvor:

changeSwitch(".js-switch",true);
$("#frm_id").trigger("reset");
0
Gilberto

Sie können dies vereinfachen:

// Uncheck: first set checked property to 'true', then uncheck to force UI update
$(".switchery").prop('checked', false).trigger("click");

// Check
$(".switchery").prop('checked', true).trigger("click");

Wenn das $ ('# sound-active-input'). Click () nicht funktioniert hat, können Sie versuchen, einen Klick auf die Spanne auszulösen, die Switchery nach dem Kontrollkästchen erstellt.

$('#sound-active-input').next('span').click();

Nur so hat es für mich funktioniert. Ich hoffe es hilft.

0
Jonathan Ramos