时间戳

首页 > 解决方案 > 在 NProgress 期间禁用表单

jquery - 在 NProgress 期间禁用表单

问题描述

我是NProgress的新手，我已经在我的项目中实现了它

为 NProgress 添加这个脚本

 <link href="~/Content/nprogress.css" rel="stylesheet" />
 <script src="~/Scripts/nprogress.js"></script>

     // Increase randomly
    var interval = setInterval(function () { NProgress.inc(); }, 3000);

    ////// Trigger finish when page fully loaded
    jQuery(window).load(function () {
        clearInterval(interval);
        NProgress.done();
    });

    ////// Trigger bar when exiting the page
    jQuery(window).unload(function () {
        NProgress.start();
    });

    $("[type=submit]").click(function () {            
        NProgress.start();
        //$("button").attr("disabled", "disabled");
        //$("input").attr("disabled", "disabled");
        //$("select").attr("disabled", "disabled");           
    });

我必须在保存按钮上实现 NProgress 栏，并且在保存期间我想实现在使用 NProgress 栏保存时不应单击或编辑任何内容的功能

我如何与 NProgress 栏一起实现

谢谢，

标签： jqueryprogress-bar

解决方案

您可以实现想要实现在使用 NProgress 栏保存时不应单击或编辑任何内容的功能

$(document).ready(function () {

var interval = setInterval(function () { NProgress.inc(); }, 1);

$(this).ajaxSuccess(function () {
    $("button").css("pointer-events", "visible");
    $("input").removeAttr("readonly");
    $("select").removeAttr("readonly");
    clearInterval(interval);
    NProgress.done();
});


$(this).ajaxError(function () {
    MakeReadWrite();
    clearInterval(interval);
    NProgress.done();
});

// Trigger finish when page fully loaded
jQuery(window).load(function () {
    clearInterval(interval);
    NProgress.done();
});

// Trigger bar when exiting the page
jQuery(window).unload(function () {
    NProgress.start();
});

$("[type=submit]").click(function () {            
    $("button").css("pointer-events", "none");
    $("input").attr("readonly");
    $("select").attr("readonly");
    NProgress.start();        
});    

 });

推荐阅读