问题是change事件仅在焦点从输入移开时触发(例如，有人单击输入或从输入中删除标签)。试着用keyup代替:

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

登入表格:

<form method="post" action="/login">
    <input type="text" id="email" name="email" size="35" maxlength="40" placeholder="Email" />
    <input type="password" id="password" name="password" size="15" maxlength="20" placeholder="Password"/>
    <input type="submit" id="send" value="Send">
</form>

Javascript:

$(document).ready(function() {    
    $('#send').prop('disabled', true);

    $('#email, #password').keyup(function(){

        if ($('#password').val() != '' && $('#email').val() != '')
        {
            $('#send').prop('disabled', false);
        }
        else
        {
            $('#send').prop('disabled', true);
        }
    });
});

这个问题已经2年了，但它仍然是一个好问题，它是第一个谷歌结果，但所有现有的答案都建议设置和删除HTML属性(removeAttr("disabled"))“残疾”，这不是正确的方法。关于属性和属性有很多混淆。

HTML

标记中<input type="button" disabled>中的"disabled"被W3C称为布尔属性。

HTML与DOM

引用:

属性在DOM中;一个属性在HTML中，被解析成DOM。

https://stackoverflow.com/a/7572855/664132

jQuery

相关:

然而，关于checked属性要记住的最重要的概念是，它并不对应于checked属性。该属性实际上对应于defaultChecked属性，应该仅用于设置复选框的初始值。选中的属性值不会随着复选框的状态而改变，而选中的属性则会。因此，跨浏览器兼容的确定是否选中复选框的方法是使用属性。

相关:

属性通常影响DOM元素的动态状态，而不改变序列化的HTML属性。例如，输入元素的value属性，输入和按钮的disabled属性，或者复选框的checked属性。应该使用.prop()方法来设置禁用和检查，而不是使用.attr()方法。

$( "input" ).prop( "disabled", false );

总结

(…更改DOM属性，例如[…]]禁用状态，使用.prop()方法。

(http://api.jquery.com/attr/)

关于问题的disable on change部分:有一个名为“input”的事件，但浏览器支持有限，而且它不是jQuery事件，因此jQuery无法使其工作。change事件可靠地工作，但在元素失去焦点时触发。因此，人们可能会将两者结合起来(有些人还会听keyup和paste)。

下面是一段未经测试的代码来说明我的意思:

$(document).ready(function() {
    var $submit = $('input[type="submit"]');
    $submit.prop('disabled', true);
    $('input[type="text"]').on('input change', function() { //'input change keyup paste'
        $submit.prop('disabled', !$(this).val().length);
    });
});

我们可以简单地使用if & else。如果你的输入是空的，我们可以有

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

否则我们可以把false变成true

这里是文件输入字段的解决方案。

当文件未被选中时禁用文件字段的提交按钮，然后在用户选择要上传的文件后启用:

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

Html:

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

香草JS解决方案。它适用于整个表单，而不仅仅是一个输入。

在问题中选择JavaScript标签。

HTML表单:

var form = document.querySelector('form') var inputs = form.querySelectorAll('input') var required_inputs = form.querySelectorAll('input[required]') var register = document.querySelector('input[type="submit"]') form.addEventListener('keyup', function(e) { var disabled = false inputs.forEach(function(input, index) { if (input.value === '' || !input.value.replace(/\s/g, '').length) { disabled = true } }) if (disabled) { register.setAttribute('disabled', 'disabled') } else { register.removeAttribute('disabled') } }) <form action="/signup"> <div> <label for="username">User Name</label> <input type="text" name="username" required/> </div> <div> <label for="password">Password</label> <input type="password" name="password" /> </div> <div> <label for="r_password">Retype Password</label> <input type="password" name="r_password" /> </div> <div> <label for="email">Email</label> <input type="text" name="email" /> </div> <input type="submit" value="Signup" disabled="disabled" /> </form>

这里做一些解释:

在这段代码中，我们在html表单上添加了keyup事件，并在每个按键检查所有输入字段。如果至少有一个输入字段为空或只包含空格字符，则将true值赋给禁用变量并禁用提交按钮。

如果你需要禁用提交按钮，直到所有必需的输入字段都被填满-替换:

inputs.forEach(function(input, index) {

:

required_inputs.forEach(function(input, index) {

其中required_inputs已经声明为只包含必需输入字段的数组。