CODEWITHSUNDEEP
javascriptphpjqueryhtmlcodeigniter
d_unknown
d_unknown

Reputation: 875

how to add a checkbox in a datatable php

I have a table that displays the result of a query. I am using codeigniter by the way. I want to add a checkbox in every row. And everytime a checkbox is checked, I will enable the edit button and the delete button..

I made it this way but only on the first row, it enable and disable the button:

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

here's my jquery:

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

    });
</script>

Upvotes: 1

Views: 2438

Answers (2)

viral
viral

Reputation: 3743

Add class in this line

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

Bind jquery on change event like

$(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
    });
});

Upvotes: 1

Mohan Kumar
Mohan Kumar

Reputation: 102

You have to class instead of using id for the checkbox. Check if any of the checkbox is checked and enable edit, delete button.

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

Upvotes: 2

Related Questions