JavaScript to Toggle Material Design Lite Switch

Question

У меня есть следующий Material Design Lite switch в моем HTML-коде и ищет помощь по javascript.

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> 
    <input type="checkbox" id="switch-1" class="mdl-switch__input" checked /> 
    <span class="mdl-switch__label">USEREMAIL Subscribed</span> 
</label> 

После нажатия переключателя, я хотел бы добавить: функциональность

1. Переключить обновить чек бесконтрольно - как и выключать переключатель, но ищет JavaScript помочь здесь.

2. Я бы хотел иметь значения «подписаны» и «отписаны» как текст, который отображается рядом с ним, как показано (но жестко закодирован в html). Можно ли это изменить динамически?

Спасибо за ваше время. Я нашел это as a reference, но он использовал CheckBox.

Answer 1

Если вы ссылаетесь на mdl source code, вы обнаружите, что функции проверки и снятия отметки связаны с меткой метки.

Вы можете указать идентификатор для обозначения, как показано ниже:

<label id="check" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> 
    <input type="checkbox" id="switch-1" class="mdl-switch__input"/> 
    <span class="mdl-switch__label">Subscribed</span> 
</label> 
<input type="button" value="test switch" id="btn"/> 

MDL изначально поддерживает вкл/выкл переключатель состояния на кнопку мыши. Вы также можете управлять статусом с помощью другой кнопки.

$("#btn").click(function() { 
    if($('#check').is('.is-checked')) { 
     $('#check')[0].MaterialSwitch.off(); 
    } 
    else { 
     $('#check')[0].MaterialSwitch.on(); 
    } 
}); 

Чтобы обновить ярлык коммутатора динамически, код можно поместить, как показано ниже. Примените событие изменения ввода при загрузке страницы и обновите текст ярлыка, если статус включения/выключения изменится.

//toggle label 
$('#check input').change(function(){ 
    if($(this).is(':checked')) 
     $(this).next().text("Unsubscribed"); 
    else 
     $(this).next().text("Subscribed"); 
}); 

Адрес jsFiddle code. Ответ приходит немного поздно для вас, но я надеюсь, что это все еще помогает.