title: Angular2 - Check-All box is selecting disabled inputs
body: <p>I have a simple component where there is a table that contains a <code>CheckAll</code> checkbox and then each table row contains a checkbox for that individual row.</p>
  
  <p>There are some pieces of criteria that will disable a row from being selected and this is reflected using the <code>[disabled]</code> directive on the specific rows.</p>
  
  <p>This disables the individual row just fine, however, my <code>check all</code> box is still selecting these disabled <code>rows</code>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table class="table table-condensed" *ngIf="importResults?.length &gt; 0"&gt;
           &lt;thead&gt;
              &lt;tr&gt;
                 &lt;th&gt;&lt;input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)"&gt;&lt;/th&gt;
                 &lt;th&gt;Name&lt;/th&gt;
              &lt;/tr&gt;
           &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr *ngFor="let i of importResults" &gt;
                  &lt;td&gt;
                      &lt;input type="checkbox"
                              id="checkbox_{{ i.QID }}"
                              [checked]="i.checked"
                              (click)="toggleSelectedEmployee(i)"
                              [(ngModel)]="i.checked" 
                              [disabled] = "i.OnTempAssignment == 'True'"
                              /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;{{ i.PreferredName }} {{ i.LastName }}&lt;/td&gt;
              &lt;/tr&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>    /**
       * Toggle all employees (checked/unchecked) in step 2.
       *
       * @param {any} flag
       * @memberof EmployeeSelectionComponent
       */
      toggleAllEmployees(flag) {
          if (flag) {
              for (let i = 0; i &lt; this.importResults.length; i++) {
                      this.importResults[i].checked = true;
              }
              this.employeeSelection = this.importResults;
              // Emit our changes
              this.selectedEmployees.emit(this.employeeSelection);
          } else {
              for (let i = 0; i &lt; this.importResults.length; i++) {
                  this.importResults[i].checked = false;
                  this.employeeSelection = [];
                  // Emit our changes
                  this.selectedEmployees.emit(this.employeeSelection);
              }
          }
      }
  </code></pre>
  
  <p><strong>My Question:</strong></p>
  
  <p>How can I make this <code>check all</code> checkbox ignore (not check) any checkboxes that are disabled? </p>