Materializecssのチェックボックス入力がjQueryと連携していません

Question

私はSimonゲームを構築していますが、Materialize.cssライブラリのcheckboxinputsの2つのセットを使用しています。公式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>