title: Disable button with checkbox in table
body: <p>I have an array of data on which each row has a checkbox which the user can check to select a row.
  I want to make it so that if no row is selected, the "delete" button will be disabled.</p>
  
  <p>The button gets disabled on page load, and the checkbox on row 1 works as planned, but if the table contains 2 or more rows the rest don't.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>&lt;button class="btn btn-default modal-opener" id="chkboxdelbtn" onchange="toggle();" type="button" type="submit"&gt;Delete Selection&lt;/button&gt;
  
  &lt;?php 
      $row = get_member_tskey_info($mysqli);
      $i = 0;
      foreach ($row as $r){
          echo '&lt;tr&gt;&lt;td style="padding-right:0px;"&gt;';
  
          if (($i&lt;=2) &amp;&amp; ($r['status'] == 1)){        
              echo '&lt;input type="checkbox" name="keyselect[]" id="keyselect[]" value="' . $r['uid'] . '" /&gt;&lt;/td&gt;';                                                
          }else{
              echo '&lt;input type="checkbox" disabled="disabled" value="" /&gt;&lt;/td&gt;';
          }
          ...
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>document.getElementById('chkboxdelbtn').disabled = true;
  function toggle() {
      if (document.getElementById('keyselect[]').checked == true) {
          document.getElementById('chkboxdelbtn').disabled = false;
      } else {
          document.getElementById('chkboxdelbtn').disabled = true;
      }
  }
  </code></pre>