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

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


当前回答

我们可以简单地使用if & else。如果你的输入是空的,我们可以有

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

否则我们可以把false变成true

其他回答

我们可以简单地使用if & else。如果你的输入是空的,我们可以有

if($(#name).val() != '') {
   $('input[type="submit"]').attr('disabled' , false);
}

否则我们可以把false变成true

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

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

它是这样工作的:

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

确保在你的HTML中有一个“disabled”属性

看看我项目中的这个片段

 $("input[type="submit"]", "#letter-form").on("click",
        function(e) {
             e.preventDefault();


$.post($("#letter-form").attr('action'), $("#letter-form").serialize(),
                 function(response) {// your response from form submit
                    if (response.result === 'Redirect') {
                        window.location = response.url;
                    } else {
                        Message(response.saveChangesResult, response.operation, response.data);
                    }
});
$(this).attr('disabled', 'disabled'); //this is what you want

所以在你的操作执行后禁用按钮

(美元)。attr(“禁用”,“禁用”);