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种方法：

如果要“显示”表单元素已禁用你可以让js将字段的值存储在隐藏变量中 <input type='hidden' value='[the value of the disabled field]' name='[name of disabled field]' />然后禁用可见输入
您还可以尝试将字段设置为已禁用，并在用户尝试再次修改字段时添加blur()字段的onfocus事件。
您可以在取消禁用任何内容的表单中添加onsubmit事件具有已禁用属性集的输入，以便提交它们正常。

Answer 2

在这种情况下，不是禁用按钮而是添加disabled课程，并在submit form时检查此课程。如果该类仅存在return false其他true，则在返回true之前，将disabled类添加到buttons类型的所有submit。< / p>

 $("#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;
}

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

2 个答案: