在我的用例中,我需要在默认情况下禁用弹出窗口中的“下一步”按钮,直到任何一个单选按钮被选中。
需要在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'}}>×</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);
}
});
这是弹出窗口。我需要禁用下一个按钮,直到有人选择任何一个单选按钮。如果选中单选按钮,我需要启用下一个选项。
答案 0 :(得分:0)
首先,您可以使用
禁用按钮disabled="disabled"
出现pop时,为下一个按钮btn-next
添加额外的课程。
检查是否选中单选按钮以启用按钮。
$(document).on('click',"input:radio[name='accounts']",function () {
if ($(this).is(':checked')) {
$(".btn-next").prop("disabled", false);
}
});
答案 1 :(得分:0)
您可以使用.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;
});