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

Posted 2023-03-05

【中文标题】如何根据角度 6 中的条件禁用复选框？

【英文标题】：How to disable a checkbox based on conditions in angular 6?

【发布时间】：2019-01-17 06:33:15

【问题描述】：

我的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，但它似乎不起作用。有人可以帮我解决这个问题吗？

【问题讨论】：

试试[disabled]。 ng-disabled 是 AngularJS 语法。

【参考方案1】：

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

例如：-

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

isDisabled 变量将在您的.ts 中保存布尔值

【参考方案2】：

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

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

这里是文档：https://angular.io/guide/reactive-forms

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

更新 2：您也不一定需要使用表单来利用反应式表单控件。

在您的component.ts 文件中，从@angular/forms 导入FormControl，如下所示：

import  FormControl  from '@angular/forms';

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

checkbox1 = new FormControl('');

然后在您的模板中，简单地将 FormControl 绑定到输入元素：

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

然后您应该可以在任何地方使用以下方法访问该值：

checkbox1.value

【讨论】：

[disabled]="Checkbox1.checked" 条件不起作用@Mr Shantastic

对不起，我习惯使用响应式表单。我相信这种方法适用于反应形式。强烈建议将反应式表单用于更大、更复杂的表单。响应式表单通过对数据模型的同步访问、可观察运算符的不变性以及通过可观察流的更改跟踪提供了更多的可预测性。我会尽快用这些信息更新我的答案。

【参考方案3】：

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 样式和动画进行了增强。

Angular Material

【参考方案4】：

如果您使用的是响应式表单，您还可以像这样禁用组件中的复选框

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

constructor(private _fb: FormBuilder)  

myForm: FormGroup;

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

【参考方案5】：

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

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

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

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

【讨论】：

需要null。奇怪的是 false 不会重新启用复选框