title: Javascript/jQuery disable buttons by classname
body: <p>I have a complex Javascript app which populates a button depending on the app state and readonly permissions:</p>
  
  <p>But essentially the button looks like this when it is added to the document:</p>
  
  <pre><code>&lt;button type="button" id="..." class="btn btn-link btn-table-action btn-table-add-row" title="Add"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>The id is auto generated and is not known before hand. Besides we have several of these buttons, that all need to be disabled/enabled simultaneously.</p>
  
  <p>I tried the following with no luck:</p>
  
  <pre><code>$(".btn-table-add-row").prop('disabled', true);
  
  setInterval(function() {
    $(".btn-table-add-row").prop('disabled', true);
  }, 1000);
  
  var elems = document.getElementsByClassName("btn-table-add-row");
  console.log(elems);
  for(var i = 0; i &lt; elems.length; i++) {
    elems[i].disabled = true;
  }
  </code></pre>
  
  <p>The above examples were all tried on page load, after the document has loaded and the buttons are visible. I am able to read the elems list in the last example, but they will not disable. Any suggestions?</p>