[英]Allow check only one checkbox and get value of checked
我此時只有2個復選框,我想要實現什么? 例如,如果您選中復選框 - 值 2(但您之前選中了值 1),我想取消選中 value1 和 select 僅 value2。 如果你想再次 select value1 然后取消選中 value2。
我為我的問題https://stackblitz.com/edit/angular-pr9rf3?file=src/app/app.component.ts 准備了 stackblitz
我想只允許 select 一個復選框,然后禁用第二個,但我也想取消選中這個,所以我可以再次 select 復選框。
這是代碼: app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
public checklist: any[];
constructor() {
this.checklist = [
{ id: 1, value: "value1", isSelected: false },
{ id: 2, value: "value2", isSelected: false }
];
}
isAllSelected(item) {
this.checklist.forEach(val => {
if (val.id == item.id) val.isSelected = !val.isSelected;
else {
val.isSelected = false;
}
});
}
}
app.component.html
<hello name="{{ name }}"></hello>
<div class="col-md-12 align-items-center">
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" value="{{item.id}}" [checked]="item.isSelected"
(change)="isAllSelected(item)"/>
{{item.value}}</li>
</ul>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.