我的表格有 3 列。第三列是每行的复选框。
<tr id='sub".$this->getHtmlId()."_".$cpt."' class='mui-row'>
<td class='mui-col-md-6'>".$row[0]."</td>
<td class='mui-col-md-2'>".$row[1]."</td>
<td class='mui-col-md-2' style='border:none'>
<component id='box' class=\ "CheckBoxComponent\" name=\ "chk".$row[3]. "\" />
</td>
</tr>";
我想要的是,当我选中一个复选框时,删除按钮变得可见,如果我选中第二个或更多,则它保持可见,因为我可以同时删除多行。
现在,我尝试过的所有操作都是这样,当我检查一行时,按钮出现,我单击第二个按钮,它消失,当我单击第三个按钮时,它再次出现
这里是我尝试过的一些例子:
$('#deleteButton').toggle('slow', function() {
// Animation complete.
});
var chkbox = $(\".check\");
button = $(\"#box\");
button.attr(\"disabled\",\"disabled\");
chkbox.change(function() {
if (this.checked) {
button.removeAttr(\"disabled\");
}
else {
button.attr(\"disabled\",\"disabled\");
}
});
最佳答案
可以通过$(".check:checked").length获取选中复选框的数量
如果有选中的复选框,则显示按钮。
$(function() {
//hide on init
$("#deleteButton").hide();
$(".check").click(function() {
//get the number of checked
if ($(".check:checked").length) $("#deleteButton").show();
else $("#deleteButton").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='mui-row'>
<td class='mui-col-md-6'>1</td>
<td class='mui-col-md-2'>1</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>2</td>
<td class='mui-col-md-2'>2</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>3</td>
<td class='mui-col-md-2'>3</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
</table>
<button id="deleteButton" type="button">Delete!</button>
关于javascript - 选中复选框时删除按钮可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48908911/