form.html
<input id="okornot" class="form-check-input" type="checkbox" name="chkbx1" formControlName="" (change)="checkBelts($event)" />
form.ts
checkBelts(val, event) {
this.checkBelt = val.target.checked;
if (val.target.checked == true) {
this.txtcheck = false;
} else {
this.txtcheck = true;
}
console.log("value", this.txtcheck);
}
Normal input type checkbox does not contain value. So I give it one with prop checked. Each time it's clicked we change the boolean to true/false thus keeping track if its checked or not. We use [disabled] to disable or enable textareas. On an Angular project I suggest using material components instead of native HTML elements, they offer more powerful event listeners aside from looking better as well. https://material.angular.io/components/checkbox/overview
<input id="chkbx1" class="form-check-input" type="checkbox" name="chkbx1" [value]="checked" #chkbx1 (change)="checkBelts()" />
<br>
<textarea [disabled]="textbox1"></textarea>
<br>
<textarea [disabled]=textbox2></textarea>
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
@ViewChild('chkbx1') checkbox: ElementRef;
textbox1: boolean = false;
textbox2: boolean = false;
checked: boolean = false;
list: any[];
ngOnInit() {}
checkBelts() {
this.checked = !this.checked;
console.log(this.checkbox.nativeElement.value);
if (this.checked === true) {
this.textbox1 = true;
this.textbox2 = true;
} else {
this.textbox1 = false;
this.textbox2 = false;
}
}
}
Here is a working example: https://stackblitz.com/edit/angular-ivy-c11gpb?file=src%2Fapp%2Fapp.component.ts
You want to use the valueChanges Observable of your parent checkbox and disable/enable the child checkboxes depending on what it emits. Something like
this.parentCheckboxCtrl.valueChanges.pipe(
// unsubscribe logic goes here, takeUntil for example,
tap(value => value ? this.disableChildren() : this.enableChildren())
).subscribe();
disableChildren() {
this.firstChildCtrl.disable();
this.secondChildCtrl.disable();
}
enableChildren() {
this.firstChildCtrl.enable();
this.secondChildCtrl.enable();
}