如何禁用/启用表单的提交按钮答案

【问题标题】：How to disable/enable submit button of a form如何禁用/启用表单的提交按钮
【发布时间】：2018-09-12 19:25:44
【问题描述】：

我有一个非常简单的查询，我有一个包含提交按钮的大表单。现在我需要通过简单的 HTML 属性 disabled="true" 禁用页面加载按钮。现在，如果任何字段失败，我需要启用按钮。

我可以通过为所有字段绑定keypress/keyup 事件来实现这一点，如果其中任何一个具有值更新，请更改按钮的属性。

但不知何故，我觉得这对这个小成就来说是一件坏事。大家有什么建议吗？

我使用了以下代码，效果很好：

$('#SendForceMessage input[type="text"],#SendForceMessage input[type="file"],#SendForceMessage input[type="number"],#SendForceMessage textarea').on('change', function () {
  var value = $(this).val();
  if (value) {
    $('.keypress.disabled.redBtn').removeClass('disabled').attr('disabled', false);
  }
});

【问题讨论】：

你在做什么听起来像是正确的方法。为什么感觉不对？您可以改用input 事件来改进它，但是很难说您的代码中是否存在任何问题而无法看到它
你应该使用blur 事件而不是keyup/keypress 事件。
检查表单的原始脏状态以启用提交按钮
您不需要将“true”传递给按钮的禁用属性，只需将“禁用”添加到按钮即可。字段的验证是如何完成的？
如果任何字段失败？还是改变了？

标签： javascript jquery html

【解决方案1】：

找到了我使用的以下解决方案。如果表单的任何字段中有任何值，下面的代码将启用提交按钮。如果启用提交按钮后表单变为空白，这将再次禁用该按钮。

<script>
    $(document).ready(function () {
        $("#main-form").on("keyup", 'input[type="text"]', function () {
            $submitStatus = $("#submitBtnId").prop('disabled');
            if ($(this).val() !== '' && $submitStatus === true) {
                $("#submitBtnId").prop('disabled', false);
            } else {
                var textFound = 0;
                $("#main-form").find('input[type="text"]').each(function () {
                    if ($(this).val() !== '') {
                        textFound = 1;
                    }
                });
                if (textFound == 0) {
                    $("#submitBtnId").prop('disabled', true);
                }
            }
        });
    });
</script>

【讨论】：

【解决方案2】：

你可以使用 jQuery 来做到这一点

$('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });

【讨论】：

【解决方案3】：

您可以在输入中附加blur 事件。与键事件blur 不同，只有当焦点从输入中移除时才会触发

function enableButton() {
  //rest of validation here
  console.log('here')
  document.getElementById('submitButton').removeAttribute('disabled', '');

}

<form>


  <input type="text" onblur='enableButton()'>
  <input type="text" onblur='enableButton()'>
  <input type="text" onblur='enableButton()'>
  <input type="text" onblur='enableButton()'>

  <button id='submitButton' type='submit' disabled='disabled'>Submit</button>

</form>

【讨论】：