Meterial Design LiteでチェックボックスをJavaScriptでON/OFFするときにハマったこと

ハマったこと

Material Design Lite（MDL）を使ったHTMLで、JavaScriptを使ってチェックボックのON/OFFを操作したい。
ただそれだけ。
ただそれだけだけど、ハマりました。

注意

MDLについての基本的なところは割愛します。
あと以下のサンプルコードは動作確認してないので、雰囲気だけ感じ取ってください。

まずはMDLの基本的な書き方

Material Design Liteではチェックボックスはこう書きます。

HTMLで書く場合

<div id="checkboxes">
  <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="sample-expandable">
    <input class="mdl-checkbox__input" type="checkbox" id="sample"> Check me!
  </label>
</div>
<button type="button" class="mdl-button" id="toggle">Toggle</button>
<button type="button" class="mdl-button" id="check">Check</button>
<button type="button" class="mdl-button" id="uncheck">Uncheck</button>

JavaScriptで書く場合

// labelタグ作成
var label = document.createElement('label');
label.id = 'sample-label';
label.className += ' mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';

// inputタグ作成
var input = document.createElement('input');
input.type = 'checkbox';
input.id = 'sample';
input.className += ' mdl-checkbox__input';

// labelのテキスト作成
var labelText = document.createTextNode('Check me!');

// 作成した要素をlabelタグに追加
label.appendChild(input);
label.appendChild(labelText);

// MDL用に要素をアップデート
componentHandler.upgradeElement(label);

// 作成したlabel要素をbodyに追加
document.getElementById('checkboxes').appendChild(label);

ボタンを押してチェックのON/OFFをしたい

通常は。。。

こうですね？

document.getElementById('check').addEventListener('click', function () {
  document.getElementById('sample').checked = true;
}, false);

document.getElementById('uncheck').addEventListener('click', function () {
  document.getElementById('sample').checked = false;
}, false);

document.getElementById('toggle').addEventListener('click', function () {
  var checkbox = document.getElementById('sample');
  if (checkbox.checked) {
    checkbox.checked = false;
  } else {
    checkbox.checked = true;
  }
}, false);

ただMDLでは動きません。

MDLでは。。。

操作対象となる要素はinput要素ではなくlabel要素になります。
つまりこういう構成になっていないやつは動作しない。

document.getElementById('check').addEventListener('click', function () {
  document.getElementById('sample-label').MaterialCheckbox.check();
}, false);

document.getElementById('uncheck').addEventListener('click', function () {
  document.getElementById('sample-label').MaterialCheckbox.uncheck();
}, false);

document.getElementById('toggle').addEventListener('click', function () {
  var label = document.getElementById('sample-label');
  if (label.className.split(' ').indexOf('is-checked') !== -1) {
    label.MaterialCheckbox.check();
  } else {
    label.MaterialCheckbox.uncheck();
  }
}, false);

最後に

久しぶりにライブラリやフレームワークに頼らずにJavaScriptを書きました。
やっぱちょっとめんどくさいなと思いました。