In my form, each div contains a label, checkbox, and input field. When the menu is opened, all checkboxes are initially unchecked, disabling all input fields. You can then enable an input field by checking its corresponding checkbox.
I attempted to implement a solution from a Stack Overflow question, but encountered an error regarding an undefined array. The first checkbox (index [0]) functions correctly, but subsequent checkboxes do not.
Below is the code snippet:
ngOnInit() {
this.resetValues();
..........
......
...
}
resetValues() {
this.checkboxArr = [
{ name: 'disabledDegree', disabled: true },
{ name: 'disabledEmployedTo', disabled: true },
{ name: 'disabledEmploymentType', disabled: true },
{ name: 'disabledSelOrg', disabled: true },
{ name: 'disabledSelMan', disabled: true }
];
.......
.....
..
}
checkSelected(name: string) {
console.log('name', name);
this.checkboxArr.forEach((x: any) => {
if (x.name === name) {
x.disabled = !x.disabled;
}
});
console.log('loop', this.checkboxArr);
}<div class="inner" *ngIf="checkboxArr && checkboxArr.length"> <-- the addition of this ngIf did not resolve the issue.
<div class="row">
<div class="label-column">
<label for="DegreeOfEmployment">...</label>
<input type="checkbox" id="DegreeOfEmploymentCheckBox" name="DegreeOfEmploymentCheckBox" (change)="checkSelected(checkboxArr[0].name)">
</div>
<div class="input-column target-org-unit">
<input [disabled]="checkboxArr[0].disabled" id="DegreeOfEmployment" name="DegreeOfEmployment" type="text" value="">
</div>
</div>
<div class="row">
<div class="label-column">
<label for="EmployedTo">....</label>
<input type="checkbox" id="EmployedToCheckBox" name="EmployedToCheckBox" (change)="checkSelected(checkboxArr[1].name)">
</div>
<div class="input-column target-org-unit">
<input [disabled]="checkBoxArr[1].disabled" id="EmployedTo" name="EmployedTo" type="date" value="">
</div>
</div>
<div class="row">
<div class="label-column">
<label for="EmploymentType">....</label>
<input type="checkbox" id="EmploymentTypeCheckBox" name="EmploymentTypeCheckBox" (change)="checkSelected(checkBoxArr[2].name)">
</div>
<div class="input-column target-org-unit">
<input [disabled]="checkBoxArr[2].disabled" id="EmploymentType" name="EmploymentType" type="text" value="">
</div>
</div>
</div>