動的に生成されたチェックボックスにJavaScriptを調整する方法

Question

私はデータベースから取得するデータの数に対応するチェックボックスが設定されたブートストラップモダリティを持っています。しかし、私はそれの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"が呼び出されますか？あなたのコンソールは何を言いますか？任意のエラー??