Как отключить кнопку, пока в Ionic не установлен переключатель

Question

Я работаю в Ionic App, и у меня есть несколько пунктов списка с переключателем, а в нижней части страницы есть кнопка оформления заказа.Я хочу отключить кнопку, пока пользователь не проверил один из пунктов.

Это мой shipping.html:

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <ion-list radio-group>
          <ion-item *ngFor="let itm of shippingdetails">
            <ion-radio item-start value="{{itm.id}}"></ion-radio>
            <ion-label>
            <h2>{{itm.name}}</h2>
            <p>{{itm.mobile}}</p>
            <p>{{itm.state}}, {{itm.city}}</p>
            <p>{{itm.address}}</p>
            <p>Pincode: {{itm.pincode}}</p>
            </ion-label>
            <button ion-button outline item-end class="myedit22" (click)="editshipping(itm)">
              <ion-icon name="create"></ion-icon>
            </button>
            <button ion-button outline item-end class="dele22" (click)="removeshipping(itm.id)">
              <ion-icon name="ios-trash-outline"></ion-icon>
            </button>
          </ion-item>
        </ion-list>
      </ion-col>
      <ion-col col-12 style="text-align: right;">
        <button (click)="presentProfileModal()" class="myaddto22" ion-button square item-right>
          Add Address
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer class="single-footer" style="bottom: 51px; background-color: #fff;">

  <ion-grid>
    <ion-row>
      <ion-col class="addCart">
        <button class="myaddto22" [disabled]="!value" full ion-button round="true">
          Make Payment
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-footer>

В этом HTML-коде я показываюэлементы с переключателем и кнопкой проверки внизу страницы, но проблема в том, что я не могу отключить нижнюю кнопку, пока пользователь не проверит переключатель.

Здесь я показываю пункты с переключателем, и у меня есть кнопка внизу.Он будет отключен до тех пор, пока пользователь не выберет элемент, но проблема в том, что когда пользователь выбирает элемент, после этого кнопка не активируется.

Любая помощь очень ценится.

Answer 1

Похоже, вам нужно сохранить выбранный переключатель в модели, а затем установить свой флаг отключения на основе этого.

<ion-list radio-group [(ngModel)]="yourSelectedRadioValue">
...
<button class="myaddto22" [disabled]="!yourSelectedRadioValue" full ion-button round="true">
  Make Payment
</button>