选中复选框时如何禁用两个文本框?我正在使用 Angular 6
How can I disable two textboxes when a checkbox is checked? I am using Angular 6
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);
}
您想使用父复选框的 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();
}
普通输入类型复选框不包含值。所以我给它一个道具 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
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);
}
您想使用父复选框的 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();
}
普通输入类型复选框不包含值。所以我给它一个道具 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