在Angular 2中禁用[disabled]的其他复选框

Question

我希望在选择一个复选框时禁用其他复选框.我是这样做的

<span class="input-group-addon">
    <input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked">
</span>

<span class="input-group-addon">
   <label>{{checkBox[0].label}}</label>
</span>

<input [(ngModel)]="ssn" type="password" name="ssnText" class="form-control" placeholder=" ">

我有6个复选框,所有这些都像上面一样.但是我希望他们只能选择1个复选框,而不是像现在这样做.

在我的组件中:

ssn:string;
    userId:string;
    lastName:string;
    office:string;
    role:string;

checkIfOthersAreSelected:boolean

checkBox = [
    {label: 'SSN', name:'ssn', checked:false},
    {label: 'Last Name', name:'lastName', checked:false},
    {label: 'Role', name:'role', checked:false},
    {label: 'UserId', name:'userId', checked:false},
    {label: 'Office', name:'office', checked:false},
    {label: ' Include Subordinates', name:'subordinates', checked:false}
];

html中的按钮

<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>

searchMethod

 public search(checkboxArray) {

        let ssn = checkboxArray[0];
        let lastName=checkboxArray[1];
        let role=checkboxArray[2];
        let userId= checkboxArray[3];
        let office=checkboxArray[4];


        if(ssn.checked == true){
            console.log("What is checked: "+ssn.name+" input: "+this.ssn);
            this.user = this._searchService.getUserBySSN(this.ssn);
        }
        if(userId.checked == true){
            console.log("What is checked: "+userId.name+" input: "+this.userId);
            this.user = this._searchService.getUserById(this.userId);
        }

Answer 1

这应该做到这一点.当然,如果你愿意的话你也可以用迭代来做这件事,但既然你已经分别拥有了所有的复选框,我会在这里做.让我们创建一个新方法checkSelected,该方法采用由(change)事件触发的复选框值的标签.当checked设置为true 时,我们为复选框设置禁用

<input type="checkbox" [disabled]="checkBox[0].checked" (change)="checkSelected(checkBox[0].label)">{{checkBox[0].label}}
<input type="checkbox" [disabled]="checkBox[1].checked" (change)="checkSelected(checkBox[1].label)">{{checkBox[1].label}}
<!-- The rest of the checkboxes -->

在您的TS中,让我们迭代数组并检查哪个标签与所选标签匹配.对于其他复选框,我们将布尔值切换checked为true,而选中的复选框保持为false.

checkSelected(label: string) {
   this.checkBox.forEach(x => {
       if(x.label !== label) {
           x.checked = !x.checked
       }
   })
}

取消选中该复选框后,它仍然为false,其他的也会变为false!

你去了,一切都完成了!:)这是一个Plunker.