Bootbox.js - 启用/禁用按钮+自定义jquery - 如何？

Question

我使用bootbox.js在模式中显示2个控件：

• 文件上传器
• 按钮提交文件。

这是我到目前为止在我的视图中的脚本部分：

     $('#uploadActivity').on('click', function() {
        var dialogHtml = '<form action="/Home/Load" enctype="multipart/form-data" method="post" id="frmSubmitActivity">';
        dialogHtml += '<input type="file" name="GarminActivity"/>';
        dialogHtml += '<div class="text-right"><button class="btn btn-primary has-spinner" type="submit"><i class="glyphicon glyphicon-upload"></i>';
        dialogHtml += '<span class="spinner"><i class="icon-spin icon-refresh"></i></span> @Resources.Upload</button></div>';

        bootbox.dialog({ message: dialogHtml, title: '@Resources.UploadActivity' });
    });

如您所见，用户按下按钮并显示模态。这是我的问题：

1）如果我将模态中的按钮显示为已禁用，如何在用户选择文件时启用它？

2）正如你在我的自定义dialogHTML上看到的那样，有一些微调器功能，也就是说，当提交表单时，按钮中会显示微调器图标并禁用表单上的所有控件，此行为位于javascript文件上，即引用，但没有发生这种情况。这就是（正在研究其他形式：

$("[type=submit]").on('click', function () {
var btn = $(this);
var form = $(this).closest('form');
if ($(form).valid()) {
    $(form).find('input, textarea, button, select').prop('readonly', 'readonly');
    $(btn).toggleClass('active');
    $(btn).attr("disabled", "disabled");
    $(form).submit();
}

}）;

我已经挣扎了5天而且我无法使它发挥作用。有什么想法吗？

Answer 1

尝试

Event Delegation

将事件处理程序附加到文档而不是[type=submit]，因为它将动态生成，因此它不存在于DOM就绪，因此没有附加事件处理程序。

并确保将此代码放入DOM中。

$(document).on('click', '[type=submit]', function (e) {
    e.preventDefault(); //stop form submission
    var btn = $(this),
        form = $(this).closest('form');
    if (form.valid()) {
        form.find('input, textarea, button, select').prop('readonly', true);
        btn.toggleClass('active');
        btn.prop("disabled", true);
        form.submit();
    }
});

event.preventdefault()

启用文件选择按钮。

$(document).on('change', '[type=file][name=GarminActivity]', function () {
    var btn = $(this).closest('form').find('[type=submit]');
    btn.prop("disabled", false);
});