Question

我想在onsubmit上添加启用和禁用功能，或者相应地启用和禁用提交按钮。

当我点击启用按钮时，它应该是不可点击的（禁用），禁用按钮应该是可点击的（启用），当我点击禁用按钮时，反之亦然 - 启用和禁用功能工作正常，但我遇到了一个问题：当我发布print_r（$ _ POST）的值时，没有任何显示。为什么呢？

JS

$('input').click(function () {
    var id = $(this).get();
    toggleButtons(id);
});
function toggleButtons(id){
    // Check for attr != disabled here
    $('input').removeAttr("disabled");
    $(id).attr("disabled","disabled");
}

HTML

<?php print_R($_POST); ?> 
<!DOCTYPE html>
<html> 
  <head>    
    <script src="code.jquery.com/jquery-latest.js"></script>; 
  </head> 
  <body> 
     <form method="post" action=""> 
       <input type="submit" value="Button1" disabled="disabled" name="testing" id="testing"/> 
       <input type="submit" value="Button2" name="test" id="test"/> 
     </form> 
  </body> 
</html>

Answer 1

我会在提交时使用JavaScript将CSS类“禁用按钮”添加到它，如下所示：

<强> CSS

.button-disabled {
     pointer-events: none;
}

<强>的JavaScript

$('input').click(function () {
    var id = $(this).get();
    $(this).addClass('button-disabled');
   // do other logic here
});

不确定这是否是您正在寻找的，但这只是前端解决方案。

Answer 2

如果您在卸载页面后提交表单，则无法看到已禁用的按钮
您无法停用提交按钮，因为它会停止提交。

您可以做的是处理提交事件并在其中发布

如果您想要实际提交表单并留在页面上，也可以使用iFrame或新窗口作为目标。否则使用AJAX

所以

DEMO

$(function(e) {
    $("form").on("submit",function(e) {
        e.preventDefault();  // cancel actual submit
        // ajax the form
        $.post(this.action,$(this).serialize(),function() {
          alert("submitted");
        });    

    });
    $('input').click(function () {
        var id = $(this).get();
        toggleButtons(id);
    });
    function toggleButtons(id){
        var but = id;
//        setTimeout(function() { // uncomment if you want to submit to new frame/window 
            console.log("dis")
            // Check for attr != disabled here
            $('input').removeAttr("disabled");
            $(id).attr("disabled","disabled");
//        },10); // uncomment if frame/window as taget
    }        
});

在onsubmit上发布值并启用和禁用提交按钮

2 个答案: