在提交和浏览器后退按钮后启用禁用的表单按钮

Question

在表单提交期间使用“button.prop”禁用提交按钮。如果用户使用浏览器后退按钮导航回表单，提交按钮将保持禁用状态。

如何重新启用它？

<script type="text/javascript">
$('#submit-form').validate();
$('#submit-form').on('submit', function (e) { 
    var button = $('#submit-btn'); 
    var c37=$('#c37').val(); 
    var c42=$('#c42').val(); 
    var c48=$('#c48').val(); 
    var c53=$('#c53').val(); 
    var c1=$('#c1').val(); 
    var c2=$('#c2').val(); 
    if(c37=="" || c42=="" || c42=="" || c48=="" || c53=="" || c1=="" ||c2==""){
            button.prop("disabled", false);
    } else {
            button.prop('disabled', true); 
    }
});
</script>

Answer 1

"If all fields contain some value, then your button gets disabled" 没错 - 切换它们。

<script type="text/javascript">
    $('#submit-form').validate();
    $('#submit-form').on('submit', function (e) { 
        var button = $('#submit-btn'); 
        var c37=$('#c37').val(); 
        var c42=$('#c42').val(); 
        var c48=$('#c48').val(); 
        var c53=$('#c53').val(); 
        var c1=$('#c1').val(); 
        var c2=$('#c2').val(); 
        if(c37=="" || c42=="" || c42=="" || c48=="" || c53=="" || c1=="" ||c2==""){
      button.prop('disabled', true);   // switched places          

        } else {
      button.prop("disabled", false); 
        }
    });
    </script>

Answer 2

这似乎是浏览器的特定问题 -- 在经过测试的浏览器中，以下浏览器自动重新启用了提交按钮：

微软边缘 20
Google Chrome 53
歌剧 40
手机 Google Chrome (iOS) 45

将以下代码添加到窗体底部，关闭之前 'body' 标签——至少为这些经过测试的浏览器解决了问题：

Mozilla Firefox 44

window.onunload = function(){};
$(document).ready(function(){
$('#submit-btn').prop('disabled', false);
});

野生动物园 9.1.3

移动版 Safari (iOS 8.3)

移动版 Firefox 5.3

Internet Explorer 11

window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload() 
}
};

在提交和浏览器后退按钮后启用禁用的表单按钮

Enabling a disabled form button after submit & browser back button

forms

jquery

submit

form-submit