如何將 javascript 調整為動態生成的復選框

Question

我有一個 bootstrap 模式，其中填充了與我從數據庫中檢索到的數據數量相對應的復選框。 但是，我在它的 javascript 部分上遇到了困難。

這是我的模態代碼片段：

        <!-- Bootstrap Modal - To Add New Record -->
    <!-- Modal -->
<div class="modal fade" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="color:blue;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="color:blue; text-align: center;">Add Submitted Requirements</h4>
            </div>
            <div class="modal-body">
                <?php 
    include_once 'dbconnect.php';
    $query = "SELECT * FROM requirements_tbl";
    if (!$result = mysql_query($query)) {
        exit(mysql_error());
    }

    // if query results contains rows then featch those rows 
    if(mysql_num_rows($result) > 0)
    {

        while($row = mysql_fetch_assoc($result))
        {

             echo'<div class="checkbox ">
            <label> 
            <input type="checkbox" id="chkbox" name="" value="" onclick="EnableDisableTextBox(this)">
            '.$row['requirement_name'].'
            </label>
            <div class="form-group">
            <label for="exampleInputEmaill"> Date </label>
            <input type="date" id="datefield" class="form-control" name="date" placeholder="YYYY-MM-DD" disabled="disabled">
            </div>
            </div>';
        }
    }
    else
    {
        echo "No Records Retrieve";
    }

    ?>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button>
            </div>
        </div>
    </div>
</div>


<!--- End of add modal -->

這是我的javascript：

  <script type="text/javascript">
 function EnableDisableTextBox(chkbox) {
    var datefield = document.getElementById("datefield");
    datefield.disabled = chkbox.checked ? false : true;
    if (!datefield.disabled) {
        datefield.focus();
    }
}
</script>

當我單擊第一個或最后一個復選框時，第一個日期字段是啟用不是帶有相應復選框的日期字段的那個

Answer 1

這應該是一個評論，但我在這里的聲譽很低。

請不要使用mysql。 考慮切換到 PDO 或 MYSQLI。 此外，在顯示查詢中的值之前，請考慮綁定它們，因此有理由切換到 MYSQLI 或 PDO

回到你的問題。 單擊復選框時會發生什么？ 函數“EnableDisableTextBox”是否被調用？ 你的控制台說什么？ 有什么錯誤嗎？？