How can I disable two textboxes when a checkbox is checked? I am using Angular 6

Question

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);
  }

Answer 1

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

Answer 2

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();
}