Question

当用户不选中该复选框时，我希望禁用“提交”按钮。

<ion-row *ngFor="let item of classDescription; let i = index" >
    {{ item.Location }} 
     {{ item.Instructor }}

  <ion-checkbox style="text-align: center;" 
     (ionChange)="onChecked($event,item)"
     [checked]="item.checked"
     name="classCheck"
     [(ngModel)]="item.register">
  </ion-checkbox>
</ion-row>

<ion-button color="success"
   expand="block"
   (click)="btnSubmit()"
   [disabled]="!classCheck">
 Submit
</ion-button>

由于另一个标签中存在 item 变量，我无法将其用于另一个标签。我试图打个电话。但它不起作用。

Answer 1

<ion-row *ngFor="let item of classDescription; let i = index" >
    {{ item.Location }} 
     {{ item.Instructor }}

 <ion-checkbox style="text-align: center;" (ionChange)="onChecked($event,item)" [checked]="item.checked" name="classCheck" [(ngModel)]="item.register" name="classCheck"></ion-checkbox>
 </ion-row>

<ion-button color="success" expand="block" (click)="btnSubmit()" [disabled]="isNotAllCheckedYet()">Submit</ion-button>

以及您的组件

   isNotAllCheckedYet():boolean{
    if(!this.classDescription){
         return false;
      }
        return this.classDescription.filter(a=>!a.register);        
    }

如果未全部选中，则禁用提交按钮

取消选中复选框时禁用按钮

1 个答案: