如何在表单提交上禁用多个表单按钮并仍然执行正确的操作

Question

我有一个带有多个提交按钮的表单。我只想在按下其中任何一个后禁用它们，并且一切正常，直到我在 .submit() JQuery 处理程序中“禁用”它们，在这种情况下，表单不再显示与表单一起发送按钮名称/值信息.如何禁用按钮但仍提交按钮名称/值，以便确定按下了哪个按钮？

表格

<form action="myaction" method="post" name="sendgift" id="sendgift" > 
    ....input, etc ....       
    <input type="submit" name="_action_go" value="Looks great! Do it" id="sendgiftbtn" />
    <input type="submit" name="_action_index" value="I need to make changes" id="gobackbtn" />
</form>

JS：

<script type="text/javascript">
    $("#sendgift").submit(function() {

       //if I remove these two lines, everything works
       $("#sendgiftbtn").attr('disabled', 'disabled');
       $("#gobackbtn").attr('disabled', 'disabled');

        console.log("disable buttons called");
        return true;
    });


</script>

Answer 1

disabled 属性通过设计从表单提交中删除元素：http://www.w3schools.com/tags/att_input_disabled.asp

3 种方法：

1. 如果你想让它“显示”表单元素被禁用 您可以让 js 将字段的值存储在隐藏变量中 <input type='hidden' value='[the value of the disabled field]' name='[name of disabled field]' /> 然后禁用可见 输入。

2. 您还可以尝试将该字段设置为禁用，并添加一个 onfocus 事件，以便在用户尝试再次修改该字段时blur()s 该字段。

3. 您可以将 onsubmit 事件添加到取消禁用任何 具有禁用属性集的输入，以便它们被提交 照常。

Answer 2

在这种情况下，不要禁用按钮，而是添加 disabled 类，并在您 submit form 时检查此类。如果该类仅存在return false，否则true 并在返回true 之前将disabledclass 添加到buttons 类型的所有buttonssubmit。

 $("#sendgift").submit(function(e) {

        if(!$(e.target).hasClass('disabled')){
            //if I remove these two lines, everything works
            //$("#sendgiftbtn").attr('disabled', 'disabled');
            //$("#gobackbtn").attr('disabled', 'disabled');

            //console.log("disable buttons called");

            $(this).find('input[type=submit]').addClass('disabled');

            return true;
        }
        return false;
    });

将disabled按钮样式定义为

.disabled{
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}