如何调整javascript以动态生成复选框

时间:2017-02-01 09:17:55

标签: javascript

我有一个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>

当我单击第一个或最后一个复选框时,第一个日期字段是启用不具有相应复选框的日期字段的日期字段

1 个答案:

答案 0 :(得分:0)

这应该是一个评论,但我在这里的声誉很低。

请不要使用mysql。考虑切换到PDO或MYSQLI。此外,在显示查询中的值之前,请考虑绑定它们,因此切换到MYSQLI或PDO的原因

回到你的问题。点击复选框后会发生什么?函数&#34; EnableDisableTextBox&#34;被叫?你的控制台说什么?任何错误?