Question

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

我可以通过对所有字段进行bind 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);
  }
});

Answer 1

您可以使用jQuery

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

Answer 2

您可以将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>

Answer 3

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

<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>

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

3 个答案: