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