Question

我有一个数据表和按钮用于删除和更新。这些按钮被禁用。我在每行的第一列中也有一些复选框。每当我单击该复选框时，都会启用编辑和删除按钮。它正在我的数据表的第一页上工作但是当我从数据表的其他页面单击一行时，它不会启用按钮。它有什么问题？我有这段代码：

HTML表：

<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 as $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>

Answer 1

问题是当你的$(document).ready()被解雇时，第2页和第2页的复选框不是DOM的一部分。 jQuery dataTables注入和删除行以显示不同的页面。

因此，您必须使用委托事件处理程序而不是click()。这样，动态注入的行（即它们的复选框）也将被包含在内：

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

而不是$('.check').click(function() {

分页数据表中的复选框

1 个答案: