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和第三个div中禁用所有其他复选框。

由于我是angular的新手，所以我不知道如何在此处禁用它。我尝试使用ng-disabled，但似乎无法正常工作。有人可以帮我吗？

Answer 1

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

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

请注意，仅[attr.disabled]="isDisabled无效。您需要将“禁用属性”显式设置为null，才能从“禁用”复选框中删除禁用属性。

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

Answer 2

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">功能相同。

Angular Material

Answer 3

您可以在[disable]标签中使用input[type="checkbox"]属性。

例如：-

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

isDisabled变量将在您的.ts

中保留布尔值

Answer 4

对于更大，更复杂的表格，我强烈建议您使用反应式表格。通过反应形式，您可以使用[disabled]="condition"，其中条件类似于whateverCheckbox.value。

更新：我将答案更新为使用whateverCheckbox.value，而不是whateverCheckbox.checked。此方法仅适用于反应形式。我强烈建议对较大，更复杂的表单使用反应形式，在这种情况下，您可能需要对表单元素进行更详细的个性化控制。反应式表单是围绕可观察流构建的，其中表单输入和值作为输入值流提供，同时还使您可以同步访问数据。

以下是文档：https://angular.io/guide/reactive-forms

一旦将表单设置为反应形式，实例化表单控件并将其绑定到复选框输入表单元素，您就应该能够如上所述访问复选框的值。

更新2：您也不必使用表单来利用响应式表单控件。

在组件打字稿文件中，从FromControl导入@angular/forms，如下所示：

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

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

checkbox1 = new FormControl('');

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

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

，那么您应该可以使用以下任何地方访问该值：

checkbox1.value

Answer 5

如果您使用反应式表单，则还可以从这样的组件中禁用复选框

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

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

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

如何基于角度6中的条件禁用复选框？

5 个答案: