Question

我正在检查三个文本字段，如果为空，则提交按钮不应该是可点击的。如果所有三个文本字段都不为空，那么（如您猜测的那样）提交按钮将是可点击的。

//nameText, emailText, commentsText = text fields
//If fields are non-empty, disabled status = false
$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() != "") {
        $('#submitButton').prop('disabled', false);
    }
});

//If fields are empty, disabled status = true
$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() == "") {
        $('#submitButton').prop('disabled', true);
    }
});

这并不完全正常。该按钮一直处于禁用状态，即使填写了字段也无法启用。有人可以指出我做错了什么吗？谢谢。

Answer 1

你错过了一个括号：

if $(this).val() == "") {

应为：

if ($(this).val() == "") {

这适用于您的两种情况。

我还使用了一个标志，这样你只需要使用一个循环：

var isValid = true;

$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() == "")
        isValid = false;
});

$('#submitButton').prop('disabled', !isValid);

Answer 2

您可以使用以下方式检查：

$('#submitButton').prop('disabled', function(){
    return !!$(nameText).add(emailText).add(commentsText).filter(function(){
       return !this.value.trim(); 
    }).length
});

Answer 3

您可以查看此代码段。

＆＃13;

$(document).ready(function(){
  
  
 
  checkFormValidity();
  
  $("#name,#email,#comment ").keyup(function(){
    checkFormValidity();
  });
  
  
  function checkFormValidity(){
    var allFilled = true;
    $("#name,#email,#comment").each(function() {
      if ($(this).val() == "") {
          allFilled = false;
      }
    });
    
    $('#submitButton').prop('disabled', (!allFilled));
      
  }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <form >
  <fieldset>
    <legend>Personal information:</legend>
    Name:<br>
    <input type="text" id="name" name="Name" value="">
    <br>
    Email:<br>
    <input type="text" id="email" name="email" value="">
     <br>
    Comments:<br>
    <input type="text" id="comment" name="comment" value="">
    <br><br>
    <input type="submit" id="submitButton" value="Submit">
  </fieldset>
</form>

＆＃13;

检查空字段和禁用按钮

3 个答案: