jQuery 禁用 / 启用提交按钮

<input type="text" name="textField" />
<input type="submit" value="send" />
$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

答案

问题在于,仅当焦点从输入移开(例如,有人单击输入或将选项卡移出输入)时,更改事件才会触发。尝试改用 keyup:

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

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

这个问题已有 2 年历史了,但它仍然是一个很好的问题,它是 Google 的第一个结果... 但是所有现有答案都建议设置和删除 HTML 属性 (removeAttr(“disabled”))“disabled”,但不是正确的方法。关于属性与属性存在很多困惑。

的 HTML

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

HTML 与 DOM

引用:

属性在 DOM 中; HTML 中的一个属性被解析为 DOM。

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

jQuery 查询

有关:

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

相关:

属性通常会在不更改序列化 HTML 属性的情况下影响 DOM 元素的动态状态。示例包括输入元素的 value 属性,输入和按钮的Disabled 属性或复选框的 checked 属性。 应该使用. prop()方法而不是. attr()方法来设置禁用和检查状态。

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

摘要

要更改 DOM 属性,例如表单元素的禁用状态,请使用.prop()方法。

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


至于问题的禁用更改部分:有一个名为 “输入” 的事件,但是浏览器支持受到限制,并且它不是 jQuery 事件,因此 jQuery 不会使其起作用。 change 事件可靠地工作,但是在元素失去焦点时会触发。因此,可以将两者结合在一起(有些人也听键盘输入和粘贴操作)。

这是一段未经测试的代码来显示我的意思:

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

要删除禁用的属性,

$("#elementID").removeAttr('disabled');

并添加禁用的属性使用,

$("#elementID").prop("disabled", true);

请享用 :)

或者对于不喜欢在每件事上使用 jQ 的我们:

document.getElementById("submitButtonId").disabled = true;

eric,当用户输入文本然后删除所有文本时,您的代码似乎对我不起作用。如果有人遇到同样的问题,我会创建另一个版本。你们这里去乡亲:

$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').keyup(function(){
    if($('input[type="text"]').val() == ""){
        $('input[type="submit"]').attr('disabled','disabled');
    }
    else{
        $('input[type="submit"]').removeAttr('disabled');
    }
})

它将像这样工作:

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

确保您的 HTML 中有一个 “禁用” 属性

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

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

$(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 %>

您也可以使用类似这样的东西:

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

这是现场的例子

对于表单登录:

<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);
        }
    });
});