选中复选框时删除按钮可见

Question

我有一个有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\");
                }
              });

Answer 1

您可以通过$(".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>

​