javascript - checkbox in paginated datatable -


i have datatable , buttons delete , update. , these button disabled. have checkbox in first column of every row. whenever click checkbox, edit , delete button enabled. working on first page of datatable when click row other pages of datatable, doesn't enabling buttons. problem it? have code:

html table:

<table class="table table-bordered table-hover table-striped" id="account_data" width="100%" style="margin-top: 0px">  <thead class="header">        <tr  class="well"><th colspan="3" style="text-align:center">list of users</th></tr>       <tr class="well">          <th style="width: 5px"><input type="checkbox" class="check"/></th>         <th style="font-size: 14px;padding-left: 20px;"> id#</th>         <th style="font-size: 14px;padding-left: 20px;"> name</th>         </tr>     </thead>      <tbody>       <?php if($users != null){?>         <?php foreach($users $row){ ?>              <tr>                  <td align="center"><input type="checkbox" class="accounts" name="accounts[]" value="<?php echo $row->user_id;?>"/></td>             <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_id;?></td>               <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_name;?></td>            </tr>         <?php }?>       <?php }?>     </tbody>   </table> 

jquery:

<script> $(document).ready(function(){     var count=0;     var chkid=new array();     var checkedvalue ='';     $('.check').click(function() {         $(" .check").each(function () {             if($(this).is(":checked"))             {                 $(" .accounts").prop('checked',true);                 // $('#edit_acc').prop('disabled',false);                  var n = $( " .accounts:checked" ).length;                  if(n==1){                     $('#edit_acc').prop('disabled',false);                 }                 if(n>1){                     $('#edit_acc').prop('disabled',true);                 }                 $('#delete_acc').prop('disabled',false);                 return             }             $(" .accounts").prop('checked',false);             $('#edit_acc').prop('disabled',true);             $('#delete_acc').prop('disabled',true);         });      }); }); </script> 

the problem checkboxes on page #2 , forth not part of dom when $(document).ready() fired. jquery datatables inject , remove rows in order show different pages.

so must use delegated event handler instead of click(). that, dynamically injected rows (i.e checkboxes) included :

$('#account_data').on('click', '.check', function() {   ... }); 

instead of $('.check').click(function() {


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - Bypass Geo Redirect for specific directories -

php - .htaccess mod_rewrite for dynamic url which has domain names -