代码之家 › 专栏 › 技术社区 › pixellab

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

html jquery javascript

pixellab · 技术社区 · 6 年前

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

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

我使用了以下代码:

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

3 回复 | 直到 6 年前

menaka 6 年前

您可以使用jQuery来实现这一点

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

brk 6 年前

你可以附加 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>

Rohit Mittal 6 年前

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

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前