Как я могу программно изменить состояние флажка jQuery Switchery из отмеченного на непроверенный (и наоборот)?
Я попытался использовать global_switch_sound.prop('checked', true) в элементе checkbox, но он не работает.
HTML:
<input id="sound-active-input" type="checkbox" />
JavaScript:
global_switch_sound = new Switchery(document.querySelector('#sound-active-input'));
Попробуйте следующее:
$('.switchery').click();
Он должен вызвать щелчок и переключатель. ИЛИ это:
$('.switchery').trigger('click');
Если кто-то похож на меня и хочет решения, выходящие за рамки ".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);
Надеюсь, это поможет кому-то еще.
Попробуйте следующее:
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);
Сначала вы должны сохранить все переключатели в массиве во время инициализации
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
Просто установите этот флажок с вашим идентификатором,
$('#sound-active-input').prop('checked', true);
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)
Совместим несколько ответов, работает с 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);
Я не уверен, что вы нашли решение этой проблемы, так как у меня тоже была такая же проблема, и после прочтения вашей дискуссии с @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.
Я довольно много нуб, когда дело доходит до программирования, но я чувствовал, что было бы полезно, если бы я объяснил некоторые из моих мыслительных процессов при решении этой проблемы.
Для версии AngularJS директива uiSwitch является неполной для поддержки этого. Вы должны добавить $formatter для ngModel в директиве uiSwitch, который обновляет значение переключателя.
ngModel.$formatters.push(function(value) {
$timeout(function() {
ngModel.$setViewValue(value);
switcher.setPosition(value);
});
});
При этом при обновлении модели в вашем коде будет отображаться директива ui-switch.
Если $('# sound-active-input'). click() не сработал, вы можете попробовать запустить клик по диапазону, который создает переключатель после этого флажка.
$('#sound-active-input').next('span').click();
Это был единственный способ для меня. Надеюсь, что это поможет.
попробуйте следующее:
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");
$('selector').click(function () {
$("selector").toggle(this.checked);
});
if you are using jquery version <1.6
use this
$('#checkMeOut').attr('checked');