Html 如何根据angular 6中的条件禁用复选框？

我的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和第三个div中每隔禁用一个复选框

---

因为我对angular完全陌生，所以我不知道如何在这里禁用。我曾尝试使用ng disabled，但似乎不起作用。有人能帮我吗？

您可以使用

[disable]

属性输入[type=“checkbox”]标记

例如：-

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

---

isDisabled

变量将保存

.ts

中的布尔值。对于更大、更复杂的表单，我强烈建议使用反应式表单。对于反应式表单，您可以使用

[disabled]=“condition”

，其中条件类似于

whateverCheckbox.value

更新： 我更新了答案，使用了

whateverCheckbox.value

而不是

whateverCheckbox.checked

。这种方法只适用于被动形式。我强烈建议对更大、更复杂的表单使用反应式表单，因为您可能需要对表单元素进行更详细、个性化的控制。反应式表单是围绕可观察流构建的，其中表单输入和值作为输入值流提供，同时也为您提供对数据的同步访问

以下是文件：

一旦将表单设置为被动表单，表单控件被实例化并绑定到checkbox输入表单元素，您应该能够访问如上所示的checkbox值

更新2：您也不一定需要使用表单来利用被动表单控件

在component.ts文件中，从

@angular/forms

导入

FormControl

，如下所示：

import { FormControl } from '@angular/forms';

然后在组件类中声明表单控件，如下所示：

checkbox1 = new FormControl('');

然后在模板中，只需将FormControl绑定到输入元素，如下所示：

<input type="checkbox" [formControl]="checkbox1">

---

ng disabled

是AngularJS语法。您可以使用

[disabled]

输入禁用复选框

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

in.ts

isDisabled：布尔值


可选项

您可以使用有角度的材质进行开发。因为它有很多优点。而且它还有定义良好的API

提供了与本地
相同的功能，并通过材质设计样式和动画进行了增强

如果您使用的是被动表单，您也可以像这样从组件中禁用复选框

import { FormBuilder, FormGroup } from '@angular/forms';

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

ngOnInit(): void {
 this.myForm = this._fb.group({
   myCheckBoxInput: [{value: 1, disabled: true}],
 });
}

对于Angular 2+，您可以通过在
input type=checkbox

使用：
[attr.disabled]=“isDisabled？true:null”

请注意，
[attr.disabled]=“isDisabled
单独使用将不起作用。您需要将disabled属性显式设置为
null
，以便从disabled复选框中删除disabled属性

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


Try
[disabled]
ng disabled
是AngularJS语法。[disabled]=“Checkbox1.checked“条件不起作用@ShantasticI先生对不起，我习惯于使用反应形式。我相信这种方法适用于被动形式。对于更大、更复杂的表单，强烈建议使用反应式表单。反应式表单通过同步访问数据模型、可观察操作符的不变性以及通过可观察流的更改跟踪提供了更高的可预测性。我将很快用这些信息更新我的答案。需要
null
。奇怪的是，
false
不会重新启用复选框
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />