Materializecss's checkbox input not working with jQuery
<p>I am building the Simon game, and I'm using two sets of <code>checkbox</code> <code>inputs</code> from the Materialize.css library. </p>

<p>As shown in the official <a href="http://materializecss.com/forms.html" rel="nofollow noreferrer">docs</a>, here's the snippet for the <code>checkbox</code> -</p>

<pre><code>&lt;p&gt;
  &lt;input type="checkbox" id="test5" /&gt;
  &lt;label for="test5"&gt;Red&lt;/label&gt;
&lt;/p&gt; 
</code></pre>

<p>The problem is, it doesn't seem to work at all when I try to detect if the <code>checkbox</code> is <code>checked</code>, using jQuery. I have tried both <code>is(":checked")</code> and <code>prop("checked")</code>, but neither works. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * Created by manishgiri on 12/26/16.
 */
$(document).ready(function () {
    if($("#start").is(":checked")) {
        console.log("inside");
        console.log("Start is checked");
    }
    if($("#start").prop("checked")) {
        console.log("inside");
        console.log("Start is checked");
    }
    //console.log("outside");
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;p&gt;
      &lt;input type="checkbox" id="start" /&gt;
      &lt;label for="start"&gt;Start&lt;/label&gt;
    &lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>Here's the complete app on <a href="http://codepen.io/Nyxx/pen/0bc900d390f69ac3732734af07e6fb7d" rel="nofollow noreferrer">Codepen</a>. I would appreciate any help!</p>