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中，我在页面底部显示带有单选按钮和签出按钮的项目，但问题是，在用户检查单选按钮之前，我无法禁用底部按钮。 / p>

在这里，我用单选按钮显示项目，并在底部显示按钮。它将一直禁用，直到用户选择了该项目，但问题是，当用户选择该项目之后，该按钮不可单击。

非常感谢您的帮助。

Answer 1

似乎您需要将选定的单选按钮存储在模型中，然后根据此设置禁用标志。

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

如何禁用按钮，直到在Ionic中选中单选按钮

1 个答案: