Входящий в комплект флажок флажок флаширования Materializecss не работает с jQuery

Question

Я строю игру Simon, и я использую два набора checkboxinputs из библиотеки Materialize.css.

Как показано в официальном docs, вот фрагмент кода для checkbox -

<p> 
    <input type="checkbox" id="test5" /> 
    <label for="test5">Red</label> 
</p> 

Проблема заключается в том, что, кажется, не работает вообще, когда я пытаюсь обнаружить, если checkbox является checked, используя JQuery. Я пробовал и is(":checked"), и prop("checked"), но не работает.

/** 
 
* 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"); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p> 
 
     <input type="checkbox" id="start" /> 
 
     <label for="start">Start</label> 
 
    </p>

Вот полное приложение на Codepen. Буду признателен за любую помощь!

Answer 1

Ваш код работает так, как написано - на $(document).ready (DOM load), на флажке находится флажок, чтобы проверить, проверен ли он. Поскольку код запускается только один раз, он ничего не будет делать, когда флажок будет изменен.

Чтобы получить нужное поведение, вам необходимо использовать событие onchange на входе. Здесь JQuery стиль:

/** 
 
* Created by manishgiri on 12/26/16. 
 
*/ 
 
$(document).ready(function() { 
 
    $('#start').on('change', function() { 
 
    if ($(this).is(':checked')) { 
 
     console.log('Start is checked'); 
 
    } 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p> 
 
    <input type="checkbox" id="start" /> 
 
    <label for="start">Start</label> 
 
</p>