ラジオボタンが選択されるまで、次のボタンを無効にする必要があります。

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

まずポップが表示され、[次へ]ボタンbtn-nextのための余分なクラスを追加するときに、あなたは

disabled="disabled" 

を使用して、ボタンを無効にすることができます。

ラジオボタンがオンになっているかどうかを確認して、ボタンを有効にします。

$(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; 
});