web-dev-qa-db-fra.com

Modification d'un état de case à cocher Switchery à partir du code

Comment changer par programmation un état jQuery Switchery checkbox de coché à coché (et vice versa)?

J'ai essayé d'utiliser global_switch_sound.prop('checked', true) sur l'élément checkbox mais cela ne fonctionne pas.

HTML:

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

JavaScript:

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

Essaye ça:

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

Il devrait déclencher un clic et basculer . OU ceci:

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

Si quelqu'un est comme moi et souhaite une solution allant au-delà de ".click ()" dans le DOM. La fonction suivante prend l'objet Switchery et un booléen pour indiquer si le commutateur doit être coché ou non (true/false respectivement):

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

Exemple d'utilisation:

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

J'espère que ceci aide quelqu'un d'autre

24
Tom G

Tout d'abord, vous devez stocker tous les commutateurs dans un tableau lors de l'initialisation

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

et créer une fonction locale pour basculer comme ceci

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

cela a fonctionné pour moi. Si vous rencontrez un problème d’UI, le commutateur déplace des pixels supplémentaires, ouvrez le fichier switchery.js et remplacez jack.offsetWidth par 30 pouces Switchery.prototype.setPosition une fonction

4
Aamir Syed

Essaye ça:

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

Exemple d'utilisation:

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

appeler en utilisant

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

Nécessite une vérification des erreurs et fonctionne, mais fonctionne correctement, nécessite jQuery et a été testé sur Switchery 0.8.1, livré avec un thème prédéfini que j'avais utilisé (Altair Admin)

3
Hugo Rune

Ensemble simple comme celui-ci avec votre ID de case à cocher,

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

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

2
yeyene

Combiné quelques réponses, fonctionne avec 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");
        }
    }

Exemple d'utilisation:

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

Pour la version AngularJS, la directive uiSwitch est incomplète pour prendre en charge ceci . Vous devez ajouter un formateur $ pour le ngModel dans la directive uiSwitch qui met à jour la valeur du commutateur.

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

    $timeout(function() {

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

    });

});

Avec cela, lorsque vous mettez à jour le modèle dans votre code, il sera reflété dans la directive ui-switch.

Démo de JSFiddle

0
pcasme

Lorsque vous devez cocher/décocher toutes les cases de sélection, la solution avec JQuery est:

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

j'espère que ça aide.

0
Özkan Azazi

J'ai trouvé la solution à partir du lien de suivi des problèmes github natif. Voici l'exemple de travail: http://jsfiddle.net/3am89/

C'est le morceau de code que vous devez ajouter et appeler manuellement cette fonction pour restituer le bouton:

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

Le problème qui décrit ce scénario est https://github.com/abpetkov/switchery/issues/27

0
Amit Shah

Je ne suis pas sûr que vous ayez trouvé une solution à ce problème, car moi aussi j'avais le même problème et après avoir lu votre discussion avec @Rickdep, bien qu'il n'ait pas été en mesure de vous aider (même si la solution qu'il a postée a un chèque ), vous m'avez orienté dans la bonne direction et j'ai pu trouver une solution, alors merci. Quoi qu'il en soit, voici la solution que j'ai proposée. 

Tout d'abord, vous devez utiliser l'ensemble de classes défini sur l'élément span que vous générez avec switchery.js, sur votre $ ('. Class'). Click (); fonction: ainsi, par exemple, la plage générée dans ma solution ressemble à ceci:

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

Comme la classe que je demande à switchery.js de générer dans cette solution est "switcher-questionnaire", c'est la classe que je veux utiliser dans ma fonction de clic, qui ressemble à ceci:

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

Pour ma solution, je souhaitais pouvoir utiliser le commutateur pour masquer et afficher un calque de superposition qui désactive l'accès au contenu spécifié affiché par l'utilisateur s'il détermine que la section "ne s'applique pas". Puisque switchery.js masque la case à cocher et remplace cette case par une étendue qui crée le commutateur Apple-esque que nous souhaitons tous, mais comme switchery.js ne modifie pas réellement l'état activé/désactivé de la case à cocher masquée, vous ne pouvez pas utiliser déclaration booléenne en cours de validation par rapport à l'attribut "vérifié". Ceci étant le cas, le changement le plus significatif que j’ai remarqué lorsqu’on a basculé lors du basculement consiste à changer la position de gauche du «petit» élément de 50px à 0px lorsqu’il est cliqué:

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

J'ai choisi cette solution comme solution booléenne à comparer avec un peu de sauce magique de jQuery. 

Je suis à peu près un noob en matière de programmation, mais j’ai pensé qu’il serait utile d’expliquer une partie de mes réflexions pour résoudre ce problème.

0
user3517582

S'il te plaît vérifie le!

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

essaye ça:

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

Si vous essayez ceci pour réinitialiser le formulaire, utilisez-le avant:

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

Vous pouvez simplifier ceci:

// 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");
0
DMARC Analyzer - Michiel

Si $ ('# sound-active-input'). Click () ne vous a pas fonctionné, vous pouvez essayer de déclencher un clic sur la plage créée par la commutation après la case à cocher.

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

C'était la seule façon dont cela fonctionnait pour moi. J'espère que ça aide.

0
Jonathan Ramos