title: (Angular) Make checkox disable or enable <mat-slide-toggle>
body: <p>I have a list of Users to select for a team. Imagine that i select a User, he can either be active or inactive in his team. Now, if i don't select him at all, i should not be able to either activate or deactivate him. 
  This is made by a checkbox and a slider, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ez85g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ez85g.png" alt="enter image description here"></a></p>
  
  <p>When I click the checkbox, i need to disable the toggle. I have tried doing this by: </p>
  
  <pre><code>$("#2048").prop('disabled', true);
  </code></pre>
  
  <p>or</p>
  
  <pre><code>document.querySelector('[name="' + '#2048' + '"]').disabled = true;
  </code></pre>
  
  <p>Does not work either (And yes, i know that IDs should not be numbers, but it's because every toggle is inside a *ngFor. Still, i can use them as numbers, as jQuery can select them anyway)<br></p>
  
  <p>Either way, i strongly believe that the only way to do something like this is to data-bind the 'disabled' attribute as some back-end variable that returns either a 'true' or 'false' value.</p>
  
  <p>Something like:</p>
  
  <pre><code>&lt;mat-slide-toggle 
  [id]='data.id' 
  class="status" 
  [disabled]='disableVariable'
  &gt;Active
  &lt;/mat-slide-toggle&gt;
  </code></pre>
  
  <p>and then:</p>
  
  <pre><code>disableVariable = someFunction(); //that returns true or false
  </code></pre>
  
  <p>This works, but the variable is 'too generic', i mean, every single slider will become disabled. Another problem is that this is not 'real-time', so i cant disable and enable multiple times.<br>
  Basically, it does not do the job. </p>
  
  <p>What should i be doing here? If i had a way to select those tags using their unique ID's, that would fix the problem, but neither jQuery or Javascript's Query selector can disable or enable this tag.</p>
  
  <p>EDIT:</p>
  
  <p>A litle more of my code:</p>
  
  <pre><code>    &lt;div id="table" *ngFor="let data of User; let i = index"&gt;
  
          &lt;div [id]='data.id' *ngIf='data.user== 0' class="item"&gt;
  
              &lt;label class="container" style="width: 90%"&gt;
  
                  &lt;input
                  type="checkbox" 
                  *ngIf='data.status== 0' 
                  id={{i}} 
                  class="checkbox" 
                  color=primary
                  checked&gt;
  
                  &lt;span class="checkmark"&gt;&lt;/span&gt;
  
                  &lt;div *ngIf='data.status== 0'&gt;{{data.name}}
  
                      &lt;mat-slide-toggle 
                      [id]='data.id' 
                      (change)=toggle(data.id) 
                      *ngIf='data.status== 0'
                      color=primary 
                      class="status" 
                      &gt;Active
                      &lt;/mat-slide-toggle&gt;
  
                  &lt;/div&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When i add the ([ngModel)], my checkboxes stop working, and yes, i'm importing the FormsModule</p>