title: how to use angular-material 5 checkbox
body: <p>I want to uncheck box and disable the button, Which only works when opened for the first time.</p>
  <p>Here is my template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div *ngFor=&quot;let row of interpreterLists; index as i&quot;
          class=&quot;row&quot;&gt;
              &lt;div&gt;
                  &lt;mat-checkbox type=&quot;checkbox&quot;
                  [value]=&quot;row.id&quot;
                  name=&quot;{{row.name}}  {{ row.lastname }} ({{ row.work_inprogress }}/{{ row.work_success }})&quot;
                  (chang)=&quot;onChange()&quot;
                  [(ngModel)]=&quot;selectedInterpreter[i]&quot;
                  #shoes&gt;
                      {{row.name}}
                      {{ row.lastname }}({{row.work_inprogress
                      }}/{{
                      row.work_success }})
                  &lt;/mat-checkbox&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;button mat-raised-button class=&quot;btn btn-success md-warn&quot;
  (click)=&quot;assignJob(documentDetail.id)&quot;
  [disabled]=&quot;selectedInterpreter.length == 0&quot;&gt;
      &lt;i class=&quot;material-icons&quot;&gt;check&lt;/i&gt;&amp;nbsp;&lt;span class=&quot;mat-button-wrapper&quot;&gt;สั่งงาน&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  <p>Here is my component</p>
  <pre><code>getInterpreters(department_id, doc_id) {
      let params = {
        department_id: department_id,
        doc_id: doc_id
      }
      this.userService.getInterpreters(params, 'Bearer ' + this.token).subscribe(res =&gt; {
        if (res) {
          this.interpreterLists = res;
          this.selectedInterpreter = [];
  
          for (let i = 0; i &lt; this.interpreterLists.length; i++) {
            if (this.interpreterLists[i].readyexist === 'Yes') {
  
              this.selectedInterpreter.forEach(item =&gt; {
                item.checked = false;//change as per your requirement
              });
              this.selectedInterpreter.push(this.interpreterLists[i].id);
            }
          }
          console.log('dhduchd', this.selectedInterpreter);
        } else {
          this.selectedInterpreter.forEach(item =&gt; {
            item.disabled = true;//change as per your requirement
          });
          console.log('fail: ');
        }
      })
    }
  </code></pre>
  <p>This is the web page
  <img src="https://i.stack.imgur.com/TOREH.png" alt="enter image description here" /></p>
  <p><img src="https://i.stack.imgur.com/diqCU.png" alt="enter image description here" /></p>
  <p><img src="https://i.stack.imgur.com/MojNz.png" alt="enter image description here" /></p>