我需要将下一个按钮设置为禁用，直到选中任何单选按钮

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

您可以使用.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;
 });

Answer 2

首先您可以使用禁用按钮

disabled="disabled"

当 pop 出现并为下一个按钮 btn-next 添加额外的类。

并检查单选按钮是否被选中以启用您的按钮。

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