javascript - 如果填写了文本字段，则禁用表单提交按钮

Question

我正在尝试实现一些 Jquery，基本上说“如果填写了此文本字段，则禁用提交按钮，以便无法交付/提交表单”

到目前为止，我已经想出了这个，但它不起作用

$(document).ready(function(){
$this = $("#inputValue");
 if($this.val().length>0){ 
$('input[type=submit]').attr('disabled', 'disabled');
 }  
});

当我填写表格并在我不应该提交的字段中包含文本时，我做错了什么？

谢谢

Answer 1

您的代码仅在运行时运行一次。之后，它不再被检查。

$(document).ready(function (){
  $("#inputValue").on('change', function (){
    if($(this).val().length > 0){
      $('input[type=submit]').attr('disabled', 'disabled');
    } else {
      $('input[type=submit]').removeAttr('disabled');
    }
  });
});

或者，正如@thomasfedb 建议的那样：

$(document).ready(function (){
  $('#inputValue').on('change', function() {
    $("input[type=submit]").prop('disabled', $(this).val().length > 0);
  });
});

Answer 2

我建议您keyup每次在用户输入内容时绑定一个事件以进行检查#inputValue：

$(document).ready(function() {
    $("#inputValue").on("keyup", function() {
        $("input[type=submit]").prop("disabled", !!$.trim(this.value).length);
    }).trigger("keyup");
});

Answer 3

由于您使用的是字段，因此绑定事件hidden可能会更好：change

$('#inputValue').on('change', function() {
  $('input[type="submit"]').prop('disabled', this.value.length > 0);
}).change();

Answer 4

尝试使用此代码。

$('input[type=submit]').attr("disabled", true);