我有一个显示查询结果的表。我顺便使用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>
答案 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
});
});