JavaScript can't check MDL checkbox [duplicate]

When I click on "Check", only the normal checkbox gets checked and not the MDL one (as shown in the image below). Would someone know why this is happening?

function check() {
  document.getElementById('mdl').checked = true;
  document.getElementById('normal').checked = true;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-deep_purple.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="mdl">
  <input type="checkbox" id="mdl" class="mdl-checkbox__input">  
  <span class="mdl-checkbox__label">MDL</span>
</label>
<input type="checkbox" id="normal" name="normal">
<label for="normal"> Normal</label><br>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised" onclick="check()">Check</button>