我需要將下一個按鈕設置為禁用，直到選中任何單選按鈕

Question

在我的用例中，我需要設置默認情況下從彈出菜單設置“下一步”按鈕，直到選中任何一個單選按鈕。

需要在Ember.Js中實現

我的HBS代碼（針對該彈出窗口）：

{{! To list all accounts in popup }}
<div id="listAllAccounts" class="modal animated fadeInUp modal-pop downloadAsPopup">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>&times;</button>
        <h4 class="modal-title">List of accounts</h4>
      </div>
      <div class="modal-body">
        <div class="textGroup">
          <h2 class="primaryTitle">Select an account.</h2>
        </div>
        <div class="modalTableHolder">
          <table class="primaryListTable" id="AccountsInfo">
            <thead>
              <td class="tablestyle5">Account ID</td>
              <td class="tablestyle5">Account Name</td>
            </thead>
            <tbody>
              {{#each model.integration as |list index|}}
                <tr>
                  <td class="tablestyle5"><input type="radio" name="accounts" class="messageCheckbox mt6 mR5" data-acc-name={{list.ACCOUNT_NAME}} value={{list.ACCOUNT_ID}}>{{list.ACCOUNT_ID}}</td>
                  <td class="tablestyle5">{{list.ACCOUNT_NAME}}</td>
                </tr>
              {{/each}}
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <div class="text-right">
          <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'clearModal'}}>Cancel</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" {{action 'showContainerPopup' 'clearModal'}}>Next</button>
        </div>
      </div>
    </div>
  </div>
</div>
{{! To list all accounts in popup Ends }}

JS代碼：

Ember.run.scheduleOnce('afterRender', this, function() {
          new URI(Abc, this.get('currentOrg.ABC_ID'), Project, this.get('defaultProject.PROJECT_ID'), Integration)
          .addQueryParam('email', this.get(email))
          .GETS()
          .then(function(res) {
            if(res.length !== 0){
              var sett = projectObj.get("INTEGRATION");
              self.set("model.integration", res);    //this is where i set data to that popup
              common.hideModal("loadingPopup");
              common.showModal("listAllAccounts");  
            } else {
              common.hideModal("loadingPopup");
              options.content = i18n("enable.integration.noaccount.error");
              options.type = 'warning';
              dialog.showCard(options);
            }
          });

這是彈出窗口。 我需要禁用下一個按鈕，直到有人選擇任何一個單選按鈕。 如果單選按鈕被選中，我需要啟用下一個選項。

Answer 1

首先，您可以使用禁用按鈕

disabled="disabled"

當出現pop時，為下一步按鈕btn-next添加額外的類。

並檢查是否選中了單選按鈕以啟用您的按鈕。

 $(document).on('click',"input:radio[name='accounts']",function () {
        if ($(this).is(':checked')) {
            $(".btn-next").prop("disabled", false);
        }
    });

Answer 2

您可以使用.change()或.one("change")來檢查它們是否選擇。

 $(".text-right button:last").prop("disabled", true); // disable the button
 $('input[type="radio"]').one("change", function () {
         $(".text-right button:last").prop("disabled", false); // enable it;
 });