如何根据角度 6 中的条件禁用复选框？

Question

我的html代码，

 <div>
  <div>
   <input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
   <label class="label" for="Checkbox0" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
   <label class="label" for="Checkbox1" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
   <label class="label" for="Checkbox2" >first</label>
  </div>
</div>

 <div>
  <div>
   <input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
   <label class="label" for="Checkbox3" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
   <label class="label" for="Checkbox4" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
   <label class="label" for="Checkbox5" >first</label>
  </div>
</div>

同样，我在包含复选框的同一个 html 文件中还有两个单独的 div。我需要做的是单击第一个 div 中的第一个复选框，我需要禁用第一个 div、第二个 div 和第三个中的所有其他复选框。

由于我对 Angular 完全陌生，我不知道如何在此处禁用。我曾尝试使用 ng-disabled，但它似乎不起作用。有人可以帮我弄这个吗？

原文由 sai 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

ng-disabled 是 AngularJS 语法。您可以使用 [disabled] 输入来禁用复选框。

 <input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">

在 .ts isDisabled : boolean;

---

可选的东西

您可以使用 Angular Material 进行开发。因为它有很多优点。而且它还有定义明确的 API。

<mat-checkbox> 提供与本机相同的功能 <input type="checkbox"> 增强了 Material Design 样式和动画。

角材料

原文由 darkz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Angular 2+ ，您可以通过在 --- 上设置 input type=checkbox disabled 属性来启用/禁用复选框

使用： [attr.disabled]="isDisabled ? true : null"

请注意，单独使用 [attr.disabled]="isDisabled 是行不通的。您需要将禁用属性显式设置为 null 以从禁用复选框中删除禁用属性。

 <input type="checkbox" [attr.disabled]="isDisabled ? true : null" />

原文由 akhouri 发布，翻译遵循 CC BY-SA 4.0 许可协议