如何将 javascript 调整为动态生成的复选框

Question

I have a bootstrap modal which is populated with checkboxes which corresponds to the number of data I retrieve from database. However I have a hard time on the javascript part of it.

Here is my code snippet for modal:

        <!-- 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 -->

And Here is my 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>

when I click the the first or the last checkboxes the first datefield is the one enabling not the datefield with the corresponding checkbox

Answer 1

This is supposed to be a comment but i have a low reputation here.

Please do not use mysql. Consider switching to either PDO or MYSQLI. Also, before displaying values from your query, consider binding them, hence the reason to switch over to either MYSQLI or PDO

Back to your question. What happens when you click on a checkbox? Does the function "EnableDisableTextBox" get called? What does your console say? any error??