delete button visible while checkbox is checked

I have table with 3 columns. The third columns is a check box for each row.

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

what i want is that when I check a checkbox the delete button become visible and if i check a second or more it stay visible because I can delete multiple rows at the same time.

Right now, everything I have tried do that when I check a row the button appear I click a second one it disappear and when I click a third one it appear again

here some example that I tried :

$('#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\");
                }
              });