根据其他 div 中的变量禁用按钮答案

【问题标题】：Disable button based on variable in other div根据其他 div 中的变量禁用按钮
【发布时间】：2022-02-08 15:57:56
【问题描述】：

我有一个 html 表单，您可以在其中以按钮的形式选择多天（在代码中，这些按钮的 ID 为 days）。然后，我有一个 ID 为 book 的确认按钮，只有在至少选择了一个日期按钮时才应启用该按钮。考虑到我在另一个 div 中有变量，如何检查这种情况？代码如下：

<ion-card-content>
<ion-label style="display: block;" class="datepicker_middleTitle"><h3>Pick days</h3></ion-label>
<div class="datepicker_generalDaysContainer" >
    <div class="datepicker_daysOfWeekContainer">
        <div *ngFor="let day of componentData.days" class="datepicker_singleDayWeek">
            <p>{{day.letter}}</p>
        </div>
    </div>

    <div class="datepicker_buttonDaysContainer active">
        <ion-button id="days" style="font-weight: bold;" *ngFor="let day of componentData.days" [class]="day.selected ? 'active' : day.occupied ? 'disabled' : ''" (click)="selectDay(day.number, day.occupied)">{{day.number}}</ion-button>
    </div>
</div>
<ion-button id="book" expand="block" class="btn-big" [disabled]="???" (click)="bookDesk()">BOOK DESK</ion-button>

【问题讨论】：

标签： node.js angular ionic-framework button

【解决方案1】：

在你的日子按钮上，你有(click)="selectDay(day.number, day.occupied)">{{day.number}}

因此，您可以使用相同的方法将选定的日期存储在某处，例如数组。

this.selectedDays = [];
selectDay(number: any, occupied: any) {
  this.selectedDays.push(number);
}

我没有看到您的所有代码，因此请准备好添加类型检查并在必要时进行重构。

然后我们可以检查是否选择了任何日期来结束或禁用图书按钮。

<ion-button id="book" expand="block" class="btn-big" [disabled]="selectedDays.length == 0" (click)="bookDesk()">BOOK DESK</ion-button>

【讨论】：