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

How to disable a checkbox based on conditions in angular 6?

提问by sai

My html code,

我的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>

Likewise I have two more separate divs in the same html file which contains checkboxes. What I need to do is onclick of first checkbox in first div ,I need to disabled every other checkboxes from the first div,second div & third.

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

As I'm totally new to angular I have no idea how to disable here. I have tried using ng-disabled but it seems not working. Can someone help me with this?

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

回答by darkz

ng-disabledis AngularJS syntax. You can use [disabled]input for disable checkboxes.

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 : boolean;

在.ts isDisabled : boolean;

---

---

Optional thing

可选的东西

You can use Angular Materialfor your developments. because it has many advantages. And also it has well defined API.

您可以将Angular Material用于您的开发。因为它有很多优点。并且它还具有定义明确的 API。

<mat-checkbox>provides the same functionality as a native <input type="checkbox">enhanced with Material Design styling and animations.

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

Angular Material

角材料

回答by Yashwardhan Pauranik

You can use the [disable]attribute your input[type="checkbox"]tag.

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

For eg: -

例如：-

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

isDisabledvariable will hold the boolean value in your .ts

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

回答by Mr Shantastic

For larger, more complex forms I highly recommend using a reactive form. With a reactive form, you can use [disabled]="condition"where the condition is something like whateverCheckbox.value.

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

UPDATE: I updated my answer to use whateverCheckbox.valueas opposed to whateverCheckbox.checked. This approach only works with reactive forms. I highly recommend using reactive forms for larger, more complex forms where you may need more detailed, personalized control over the elements of the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data.

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

Here is the documentation: https://angular.io/guide/reactive-forms

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

Once you have the form set up as a reactive form, a form control instantiated and bound to the checkbox input form element, you should be able to access the value of the checkbox as indicated above.

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

UPDATE 2: You don't necessarily need to use a form either to take advantage of a reactive form control.

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

In your component.ts file import FormControlfrom @angular/formsas below:

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

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

Then declare the form control in the component class, as such:

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

checkbox1 = new FormControl('');

Then in your template, simply bind that FormControl to the input element as such:

然后在您的模板中，简单地将该 FormControl 绑定到 input 元素，如下所示：

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

and then you should be able to access that value anywhere using:

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

checkbox1.value

回答by Adam Winnipass

If you are using reactive forms you can also disable the checkbox from the component like this

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

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

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

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