Materialisecss的複選框輸入不能與jQuery一起工作

Question

我正在構建Simon遊戲，並且我使用了兩套來自Materialize.css庫的checkboxinputs。

正如官方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加載）中，正在查看該複選框以查看它是否已被選中。因爲代碼只運行一次，所以在複選框更改時它不會執行任何操作。

要獲得您想要的行爲，您需要在輸入上使用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>