如何根据 angular 6 中的条件禁用复选框?
How to disable a checkbox based on conditions in 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 和第三个中的所有其他复选框。
因为我是 angular 的新手,所以我不知道如何在此处禁用。我试过使用 ng-disabled 但它似乎不起作用。有人可以帮我解决这个问题吗?
您可以使用 [disable]
属性您的 input[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
。这种方法只适用于反应形式。我强烈建议对更大、更复杂的表单使用反应式表单,在这些表单中你可能需要对表单元素进行更详细、更个性化的控制。响应式表单是围绕可观察流构建的,其中表单输入和值作为输入值流提供,同时还为您提供对数据的同步访问。
这是文档:https://angular.io/guide/reactive-forms
将表单设置为反应式表单后,表单控件实例化并绑定到复选框输入表单元素,您应该能够访问复选框的值,如上所示。
更新 2:您不一定需要使用表单来利用反应式表单控件。
在您的 component.ts 文件中,从 @angular/forms
导入 FormControl
,如下所示:
import { FormControl } from '@angular/forms';
然后在组件class中声明表单控件,如:
checkbox1 = new FormControl('');
然后在您的模板中,只需将该 FormControl 绑定到输入元素,如下所示:
<input type="checkbox" [formControl]="checkbox1">
然后您应该能够在任何地方访问该值:
checkbox1.value
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 设计样式和动画。
如果您使用的是响应式表单,您也可以像这样禁用组件中的复选框
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
[=16]上设置disabled
属性来启用/禁用复选框=]
使用: [attr.disabled]="isDisabled ? true : null"
注意这里单靠[attr.disabled]="isDisabled
是不行的。您需要将禁用属性显式设置为 null
,以便从禁用复选框中删除禁用属性。
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />
我的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 但它似乎不起作用。有人可以帮我解决这个问题吗?
您可以使用 [disable]
属性您的 input[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
。这种方法只适用于反应形式。我强烈建议对更大、更复杂的表单使用反应式表单,在这些表单中你可能需要对表单元素进行更详细、更个性化的控制。响应式表单是围绕可观察流构建的,其中表单输入和值作为输入值流提供,同时还为您提供对数据的同步访问。
这是文档:https://angular.io/guide/reactive-forms
将表单设置为反应式表单后,表单控件实例化并绑定到复选框输入表单元素,您应该能够访问复选框的值,如上所示。
更新 2:您不一定需要使用表单来利用反应式表单控件。
在您的 component.ts 文件中,从 @angular/forms
导入 FormControl
,如下所示:
import { FormControl } from '@angular/forms';
然后在组件class中声明表单控件,如:
checkbox1 = new FormControl('');
然后在您的模板中,只需将该 FormControl 绑定到输入元素,如下所示:
<input type="checkbox" [formControl]="checkbox1">
然后您应该能够在任何地方访问该值:
checkbox1.value
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 设计样式和动画。
如果您使用的是响应式表单,您也可以像这样禁用组件中的复选框
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
[=16]上设置disabled
属性来启用/禁用复选框=]
使用: [attr.disabled]="isDisabled ? true : null"
注意这里单靠[attr.disabled]="isDisabled
是不行的。您需要将禁用属性显式设置为 null
,以便从禁用复选框中删除禁用属性。
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />