Question

我有一个循环显示地址。根据地址，还会显示复选框。如果选中了一个复选框，则应自动禁用其他复选框。

checkbox.html：

<div *ngFor ="let cust of customer.Address" >
   <button type="button" class="btn-edit" data-toggle="modal" data-target="#modal" >  
     <a (click)="showOnEdit(cust)">
       <i class="fa fa-pencil-square-o"></i> Edit
     </a>                           
  </button>  

  <input type="checkbox" [disabled]="checkIfOthersAreSelected" (change)="checkSelected($event)">                            
</div>

checkbox.ts：

checkSelected(e)
{
  if(e.target.checked)
  {
    this.checkIfOthersAreSelected = true;
  }
}

我尝试了很多与此问题相关的答案，但未能获得结果。如何实现呢？

Answer 1

我不知道下面使用的customer.Address和value属性中的checked的内容。假设您的数据不包含checked属性。您可以随时添加它，也可以手动添加它：

this.customer.Address.forEach((x) => {
  x.checked = false;
})

然后，您可以在模板中引用checked中的[disabled]属性，当用户与复选框交互时，通过传递复选框对象来调用函数。在这里，我们假设value属性是唯一的，我们检查数组中每个对象的value，如果值不匹配，则禁用该字段。因此，请执行以下操作（示例代码）：

<div *ngFor="let chk of checkboxes">
 <input type="checkbox" [disabled]="chk.checked" (click)="disableOther(chk)"> {{chk.value}}
</div>

和功能：

disableOther(chk) {
  this.checkboxes.forEach(x => {
    if (x.value !== chk.value) {
      x.checked = !x.checked
    }
  })
}

演示：https://stackblitz.com/edit/angular-wo895h?file=src%2Fapp%2Fapp.component.ts

Answer 2

您可以通过获取元素ID来实现

HTML

<div *ngFor ="let cust of customer.Address" >
   <button type="button" class="btn-edit" data-toggle="modal" data-target="#modal" >  
   <a (click)="showOnEdit(cust)">
   <i class="fa fa-pencil-square-o"></i> Edit
   </a>                           
   </button>  
   <input [id]="cust.id"  type="checkbox" [disabled]="checkIfOthersAreSelected" (change)="checkSelected($event , cust.id)">   <!-- You can use even the loop count or any unique name -->                         
</div>

在ts中，您可以循环执行并禁用其他复选框

TS

checkSelected(e, id) {
    if (e.target.checked) {
        for (let index = 0; index < customer.Address; index++) {
            if (customer.Address[index].id === id) {
                document.getElementById(customer.Address[index].id).disabled = false;
            } else {
                document.getElementById(customer.Address[index].id).disabled = true;
            }
        }
    } else {
        for (let index = 0; index < customer.Address; index++) {
            document.getElementById(customer.Address[index].id).disabled = fasle;
        }
    }
}

如果选中一个复选框，则在角度6中禁用其他复选框

2 个答案: