[英]I need to set next button as disabled till any radio button got selected
在我的用例中,我需要设置默认情况下从弹出菜单设置“下一步”按钮,直到选中任何一个单选按钮。
需要在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);
}
});
这是弹出窗口。 我需要禁用下一个按钮,直到有人选择任何一个单选按钮。 如果单选按钮被选中,我需要启用下一个选项。
首先,您可以使用禁用按钮
disabled="disabled"
当出现pop时,为下一步按钮btn-next
添加额外的类。
并检查是否选中了单选按钮以启用您的按钮。
$(document).on('click',"input:radio[name='accounts']",function () {
if ($(this).is(':checked')) {
$(".btn-next").prop("disabled", false);
}
});
您可以使用.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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.