Jquery show button when checkbox is checked
I want to show the delete button below the table if a checkbox in a cell is checked. Otherwise, the button must remain hidden.
Table. I want it to be implemented. screenshot of the table:
This is the html table code.
<table id="datatable_example" class="responsive table table-striped table-bordered" style="width:100%;margin-bottom:0; ">
<thead>
<tr>
<th style="width:0px; padding-right:0px;" class="jv no_sort"> <label class="checkbox ">
<input type="checkbox">
</label>
</th>
<th style="width:200px;" class=""> Skill </th>
<th style="width:300px;" class="to_hide_phone no_sort"> Description </th>
<th class=""> Rating </th>
<th style="width:200px;" class="ue no_sort"> Date </th>
<th class="ms no_sort "> Actions </th>
</tr>
</thead>
<tbody>
<?php echo $skills; ?>
</tbody>
</table>
This is the skill variable:
$skills="";
while($row=mysql_fetch_array($skills_list))
{
$showskillid=$row['skill_id'];
$showskillname=$row['skill_name'];
$showskilldescription=$row['skill_desc'];
$showskillrating=$row['skill_rating'];
$showskill_lastupdated=$row['last_updated'];
$skills .="<tr>
<td><label class=\"checkbox\">
<input type=\"checkbox\" class=\"chkboxes\" name=\"ids[]\">
</label></td>
<td class=\"to_hide_phone\"> $showskillname </td>
<td class=\"to_hide_phone\">$showskilldescription</td>
<td> $showskillrating </td>
<td> $showskill_lastupdated </td>
<td class=\"ms\"><div class=\"btn-group1\"> <a href=\"skill_edit.php?id=$showskillid\" class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\" edit \"><i class=\"gicon-edit\"></i></a> <a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"View\"><i class=\"gicon-eye-open\"></i></a> <a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Remove\"><i class=\"gicon-remove \"></i></a> </div></td>
</tr>";
}
The jquery I've tried, but I know I'm new to jquery, so you need help fixing it.
<script type="text/javascript">
$(document).ready(function() {
$('.delbtn').hide();
});
$('.chkboxes').click(function(){
$('.delbtn').toggle();
});
</script>
Jquery I tried this, how does it work, when I click one checkbox, a button appears, and when I go and click on another checkbox, the button disappears?
I know toggle cannot be used here. What should I instead use here to fix this problem, or if there is a better option to fix it, I'm open to it.
source to share
This will show a Delete button if at least one checkbox is checked.
$('.chkboxes').change(function(){
$('.delbtn').toggle($('.chkboxes:checked').length > 0);
});
But instead of hiding it, a more common approach is to enable and disable the button:
$('.delbtn').prop('disabled', true);
$('.chkboxes').change(function(){
$('.delbtn').prop('disabled', $('.chkboxes:checked').length == 0);
});
source to share