素材デザインライトスイッチを切り替えるJavaScript

Question

私のHTMLには次のようなMaterial Design Lite switchがあり、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. 私は実際には "subscribe"と "unsubscribed"という値を、表示されているように（ただしHTMLでハードコードされている）テキストとして表示したいと考えています。これは動的に変化する可能性がありますか？

ありがとうございました。私はこのas a referenceを見つけましたが、それはCheckBoxを使用していました。

Answer 1

mdlのsource codeを参照すると、checkタグとuncheck関数がlabelタグでバインドされていることがわかります。

あなたは以下のようにラベル付けするためにIDを指定することができます。

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

スイッチラベルを動的に更新するには、以下のようにコードを入力します。 on/off状態が変化した場合は、入力の変更イベントをページ・ロードにバインドし、ラベル・テキストを更新します。

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

ここではjsFiddle codeです。答えはちょっと遅いですが、まだ助けてくれることを願っています。