title: Disabling Material Design Lite toggle switch
body: <p>I'm trying to create some elements on the page with JavaScript and dress them up with the new <a href="http://www.getmdl.io/" rel="nofollow">Material Design Lite</a>.  It all works until I try to start disabling elements programmatically after the elements are created.</p>
  
  <p>I have a few toggle switches (created by JavaScript).  When one toggles on, I want others to be disabled. </p>
  
  <p>If I use:</p>
  
  <pre><code>toggle2.disabled = true;
  </code></pre>
  
  <p>it works great and it's disabled, but as soon as I try it like this:</p>
  
  <pre><code>setInterval(function(){ 
  
  if (toggle1.checked == true) {
      toggle2.disabled = true;
  } else {
      toggle2.disabled = false;
  }
  
  }, 1000);
  </code></pre>
  
  <p>toggle2 is visually still active, the ripple effect works but it doesn't slide to ON so it's disabled in the background just not visually.</p>
  
  <p>Here's a <a href="https://jsfiddle.net/q08t7z17/2/" rel="nofollow">JSFiddle</a> for en example (uses HTML elements but the same happens with my JS created ones)</p>
  
  <p>Also, here's a <a href="https://goo.gl/PCvnC3" rel="nofollow">video of the problem</a> .  In it, the third one down is disabled by <code>toggle3.disabled = true;</code> and the fourth one is disabled by the IF statement based on the second one down's state.</p>
  
  <p>I don't know if I'm doing something wrong or this is a bug with MDL itself.</p>
  
  <p>Thanks</p>