jQuery禁用/启用提交按钮

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我有这个HTML：

<input type="text" name="textField" />
<input type="submit" value="send" />

我该如何做这样的事情：

当文本字段为空时，应禁用提交（disabled =“ disabled”）。
在文本字段中键入内容以删除禁用的属性时。
如果文本字段再次变为空（删除了文本），则应再次禁用提交按钮。

我尝试过这样的事情：

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

…但这不起作用。有任何想法吗？

#1楼

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

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

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

#2楼

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

#3楼

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

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

#4楼

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

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

#5楼

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

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

这是现场的例子

来源：oschina

链接：https://my.oschina.net/u/3797416/blog/3145126

标签

input

jquery事件

submit

jquery