选中复选框时如何禁用两个文本框？我正在使用 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

您想使用父复选框的 valueChanges Observable 和 disable/enable 子复选框，具体取决于它发出的内容。像

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

Answer 2

普通输入类型复选框不包含值。所以我给它一个道具 checked。每次单击它时，我们都会将布尔值更改为 true/false，从而跟踪它是否被选中。我们使用 [disabled] 来禁用或启用文本区域。在一个 Angular 项目中，我建议使用 material 组件而不是原生 HTML 元素，它们除了看起来更好之外还提供更强大的事件监听器。 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;
    }
  }
}

这是一个工作示例：https://stackblitz.com/edit/angular-ivy-c11gpb?file=src%2Fapp%2Fapp.component.ts

选中复选框时如何禁用两个文本框？我正在使用 Angular 6

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

angular

checkbox

angular6

angular-forms

disabled-input