title: Angular table and HTML Checked Boxes with Disabling Feature in Remaining Checked Boxes
body: <p>The goal is to have all the checked boxes become disabled when one box is checked. When I use this jquery code below, for some reason it does not work as it does in the SO solution mentioned <a href="https://stackoverflow.com/questions/43269816/html-form-programmatically-disable-remaining-checked-boxes-in-html-form/43270164#43270164">here</a>. </p>
  
  <p>In this example I am populating a table using a MVC controller in a nodejs and angular stack. When this table displays, there is a checkbox next to each name that prints in the table. <strong>Is there a solution to correctly disable the checkboxes being populated in this angular script when one checked box is selected?</strong> </p>
  
  <p>html</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
     &lt;th&gt;Names&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tr dir-paginate="x in names | filter:search | itemsPerPage:8"&gt;
     &lt;div class="checkbox" id="nameList"&gt;
        &lt;td&gt;&lt;label&gt;&lt;input type="checkbox" name="name" value={{x.name}}&gt;  {{ x.name }}&lt;/label&gt;&lt;/td&gt;
     &lt;/div&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function(){
  $('#nameList input[type=checkbox]').change(function(){
      if($(this).is(':checked')){
          $('#nameList').find(':checkbox').not($(this)).attr('disabled',true);
      }else{
          $('#nameList').find(':checkbox').attr('disabled',false);
      }
      });
  })
  </code></pre>