如何在数据表php中添加一个复选框

时间:2015-05-22 06:58:12

标签: javascript php jquery html codeigniter

我有一个显示查询结果的表。我顺便使用codeigniter。我想在每一行添加一个复选框。每次选中复选框时,我都会启用编辑按钮和删除按钮..

我这样做但只在第一行启用和禁用按钮:

<div style="margin-top: 10px;margin-left: 10px;margin-bottom: 10px">
                <a type="button" class="btn btn-default" href="<?php echo site_url('home/create')?>" ><span class=" fa fa-plus-circle"></span> Create </a>
                <button type="button" id="edit" class="btn btn-default" disabled><span class=" fa fa-edit "></span> Edit</button>
                <button type="button" class="btn btn-default" disabled > <span class=" fa fa-trash-o"></span> Delete</button>
            </div>


        <div class="table-responsive" style="margin-right: 10px;margin-left: 10px;margin-bottom: 10px">
        <table class="table table-bordered table-hover table-striped" id="recorddata"> 

        <thead class="header">
            <tr class="well">
                <th style="width: 1px"></th>
                <th style="font-size: 14px;" >Date</th> 
                <th style="font-size: 14px;">Name</th>
                <th style="font-size: 14px;">Status</th>


            </tr>

        </thead>
        <tbody >
            <?php if($result!=null){ 
                 foreach($result as $row){?>
                    <tr>
                    <td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
                 <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->datee;?></td>
                  <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->name;?></td>
                  <td style="font-size: 15px;padding-left: 20px;"><?php echo $row->status;?></td> 
                </tr>
                <?php }
                }
                ?>



        </tbody>
        </table><!-- END Table--></div>

这是我的jquery:

  <script>
    $('#recs').click(function() {
        if($('#recs').is(":checked")){
            $('#edit').prop('disabled',false)
        }
        else{
            $('#edit').prop('disabled',true)
        }

    });
</script>

2 个答案:

答案 0 :(得分:2)

您必须,而不是使用 id 作为复选框。检查是否选中了任何复选框并启用编辑,删除按钮。

<td align="center"><input type="checkbox" class="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>

答案 1 :(得分:1)

在此行中添加课程

<td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>

将jquery绑定到像

这样的变更事件上
$(document).ready(function(){
    $('.your_class').click(function(){
        // check if checkbox is checked
        var checked = false;
        $(".your_class").each(function () {
            if($(this).is(":checked"))
            {
                checked = true;
            }
        });
        if(checked)
        {
            // enable buttons here

            return;
        }
        // disable buttons here
    });
});