我有这个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');
        }
    });
});

但是不管用。什么好主意吗?


当前回答

我不得不做一些工作来使它适合我的用例。

我有一个表单,其中所有字段在提交前必须有一个值。

以下是我所做的:

  $(document).ready(function() {
       $('#form_id button[type="submit"]').prop('disabled', true);

       $('#form_id input, #form_id select').keyup(function() {
          var disable = false;

          $('#form_id input, #form_id select').each(function() {
            if($(this).val() == '') { disable = true };
          });

          $('#form_id button[type="submit"]').prop('disabled', disable);
       });
  });

感谢大家的回答。

其他回答

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

如果按钮本身是一个jQuery样式的按钮(带有.button()),您将需要刷新按钮的状态,以便在删除/添加禁用属性后添加/删除正确的类。

$( ".selector" ).button( "refresh" );

禁用:$('输入(type = "提交"])。道具(“禁用”,真正的);

启用: $('input[type=“submit”]').removeAttr('disabled');

上面的enable代码比:

$('input[type="submit"]').removeAttr('disabled');

两种方法都可以使用。

问题是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);
        }
     });
 });

要删除禁用的属性使用,

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

要添加禁用属性use,

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

享受:)