Javascript （角度）使复选框禁用或启用

我有一个为团队选择的用户列表。假设我选择了一个用户，他在团队中可以是活动的，也可以是非活动的。现在，如果我根本不选择他，我应该不能激活或停用他。 这是通过复选框和滑块实现的，如下所示：

单击复选框时，我需要禁用切换。我已尝试通过以下方式实现这一点：

$("#2048").prop('disabled', true);

或

也不起作用，是的，我知道ID不应该是数字，但这是因为每个切换都在*ngFor中。尽管如此，我仍然可以将它们用作数字，因为jQuery无论如何都可以选择它们

不管怎样，我坚信这样做的唯一方法是将“disabled”属性作为返回“true”或“false”值的后端变量进行数据绑定

比如：

<mat-slide-toggle 
[id]='data.id' 
class="status" 
[disabled]='disableVariable'
>Active
</mat-slide-toggle>

这是可行的，但变量“太通用”，我的意思是，每个滑块都将被禁用。另一个问题是，这不是“实时的”，所以我不能禁用和启用多次。 基本上，它不起作用

我应该在这里做什么？如果我有办法使用这些标记的唯一ID来选择它们，这将解决问题，但是jQuery或Javascript的查询选择器都不能禁用或启用这个标记

编辑：

我的代码还有一小部分：

    <div id="table" *ngFor="let data of User; let i = index">

        <div [id]='data.id' *ngIf='data.user== 0' class="item">

            <label class="container" style="width: 90%">

                <input
                type="checkbox" 
                *ngIf='data.status== 0' 
                id={{i}} 
                class="checkbox" 
                color=primary
                checked>

                <span class="checkmark"></span>

                <div *ngIf='data.status== 0'>{{data.name}}

                    <mat-slide-toggle 
                    [id]='data.id' 
                    (change)=toggle(data.id) 
                    *ngIf='data.status== 0'
                    color=primary 
                    class="status" 
                    >Active
                    </mat-slide-toggle>

                </div>
            </label>
        </div>
    </div>

---

当我添加[ngModel]时，我的复选框停止工作，是的，我正在导入FormsModule。您可以使用双向绑定来更新复选框的状态，如下所示：

向输入字段添加和禁用属性

// Declare variable in component
CheckboxVar:boolean;

// In Html write below code
<input type="checkbox" [(ngModel)]="CheckboxVar" [disabled]="!CheckboxVar">

// Disabled checkbox when checkboxvar = false;
<input type="checkbox" [disabled]="!CheckboxVar">

HTML代码：

<input type="checkbox" [(ngModel)]="checked">
<mat-slide-toggle [disabled]="checked">
    Slide me!
</mat-slide-toggle>

<div *ngFor="let obj of list">
  <mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
  <br><br>
  <mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>

---

在上面的示例中，如果选中复选框，则将更新选中的变量，如果选中的值等于true，则将禁用切换。

如果我正确理解要求：

HTML代码：

<input type="checkbox" [(ngModel)]="checked">
<mat-slide-toggle [disabled]="checked">
    Slide me!
</mat-slide-toggle>

<div *ngFor="let obj of list">
  <mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
  <br><br>
  <mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>

---

您不应该将jQuery与angular一起使用，请检查如何在angular中实现表单：在示例中，您禁用了toogle:它不起作用，因为我的复选框不重要，它不能帮助您？哇，这正是我需要的。你能将其作为答案发布吗？添加ngModel会使我的复选框出现问题：/n它不起作用。请分享你的代码，因为我能理解更多。纠正我如果我错了，你只想在复选框被选中后禁用切换。一旦复选框被选中，是。然后你可以写入复选框的选中事件，在这种情况下，您可以根据需要将变量值更新为true或false。[ngModel]使我的输入停止工作，我需要另一种方法

<div *ngFor="let obj of list">
  <mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
  <br><br>
  <mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>

list = [
    { id : 1,inTeam: false, isActive: false },
    { id : 3,inTeam: false, isActive: false },
    { id : 3,inTeam: false, isActive: false },
    { id : 4,inTeam: false, isActive: false }
]