0

我正在使用 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天，我无法让它工作。有任何想法吗？

图片

4

1 回答 1

2

尝试

事件委托

将事件处理程序附加到文档而不是[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);
});
于 2014-06-16T01:56:04.533 回答