jQuery 禁用/启用提交按钮

javascript jquery html

2022-08-29 22:14:14

我有这个HTML：

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

...但它不起作用。有什么想法吗？

答案 1

问题在于，只有当焦点从输入中移开时（例如，有人单击输入或从中跳出选项卡），才会触发更改事件。请尝试改用密钥设置：

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

答案 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");
  }
}