Изменение состояния переключателя Switchery из кода

Ответ 1

Попробуйте следующее:

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

Он должен вызвать щелчок и переключатель. ИЛИ это:

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

Ответ 2

Если кто-то похож на меня и хочет решения, выходящие за рамки ".click()" в DOM. Следующая функция принимает объект Switchery и логическое значение, указывающее, должен ли переключатель быть установлен или не установлен (true/false соответственно):

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

Пример использования:

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

Надеюсь, это поможет кому-то еще.

Ответ 3

Попробуйте следующее:

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

Пример использования:

var element = $('#sound-active-input');
changeSwitchery(element, false);

Ответ 4

Сначала вы должны сохранить все переключатели в массиве во время инициализации

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

и создайте локальную функцию для переключения переключателя, подобного этому

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

это сработало для меня. В случае, если вы сталкиваетесь с какой-либо проблемой пользовательского интерфейса, то есть переключатель перемещает некоторые дополнительные пиксели, затем откройте switchery.js и замените jack.offsetWidth на 30 в Функция Switchery.prototype.setPosition

Ответ 5

Просто установите этот флажок с вашим идентификатором,

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

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

Ответ 6

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 already on so 
            $(switch_elem).trigger('click').removeAttr("checked"); // turn it off
        }else{ // otherwise 
            // nothing, already off
        }
    }
}

с помощью

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

Требуется проверка ошибок и прочее, но работает хорошо, требует jQuery и протестирован на Switchery 0.8.1, который поставляется в комплекте с предварительно созданной темой, которую я использовал (Altair Admin)

Ответ 7

Совместим несколько ответов, работает с 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");
        }
    }

Пример использования:

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

Ответ 8

Я не уверен, что вы нашли решение этой проблемы, так как у меня тоже была такая же проблема, и после прочтения вашей дискуссии с @Rickdep, хотя он не смог вам помочь (хотя решение, которое он опубликовал, проверьте рядом с ним), вы, ребята, указали мне в правильном направлении, и я смог придумать решение, так что спасибо. Во всяком случае, вот решение, которое я придумал.

Во-первых, вам нужно использовать набор классов в элементе span, который вы создаете с помощью switchery.js, на ваш $('. class'). click(); function: так, например, генерируемый в моем решении диапазон выглядит следующим образом:

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

Поскольку класс, о котором я рассказываю, что switchery.js генерирует в этом решении, является "switcher-questionnaire", то есть класс, который я хочу использовать в моей функции щелчка, которая выглядит так:

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

Для моего решения я хотел иметь возможность использовать переключатель, чтобы скрыть и показать слой наложения, который отключает доступ к указанному контенту, который пользователь просматривает, если пользователь определяет раздел "не применяется". Так как switchery.js скрывает флажок и заменяет этот флажок диапазоном, который создает переключатель Apple-esque, который мы все хотим, но поскольку switchery.js фактически не изменяет установленное/непроверенное состояние скрытого флажка, вы не можете использовать boolean, который активно проверяет флажок "checked". В этом случае я наиболее значительным изменением я заметил, что переключатель делает, когда при переключении меняется левая позиция "маленького" элемента с 50 пикселей до 0 пикселей при нажатии:

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

Я выбрал это как то, что я буду использовать в качестве логического решения для проверки с помощью немного волшебного соуса jQuery.

Я довольно много нуб, когда дело доходит до программирования, но я чувствовал, что было бы полезно, если бы я объяснил некоторые из моих мыслительных процессов при решении этой проблемы.

Ответ 9

Для версии AngularJS директива uiSwitch является неполной для поддержки этого. Вы должны добавить $formatter для ngModel в директиве uiSwitch, который обновляет значение переключателя.

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

    $timeout(function() {

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

    });

});

При этом при обновлении модели в вашем коде будет отображаться директива ui-switch.

JSFiddle demo

Ответ 10

Если $('# sound-active-input'). click() не сработал, вы можете попробовать запустить клик по диапазону, который создает переключатель после этого флажка.

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

Это был единственный способ для меня. Надеюсь, что это поможет.

Ответ 11

попробуйте следующее:

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

Если вы попробуете это в форме reset, используйте его до:

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

Ответ 12

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


if you are using jquery version <1.6

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