Question

我在一个页面上有多个表单，我想要禁用它们的提交按钮，直到它们被填满。

看起来像这样：

$('form input').keyup(function() {

  var empty = false;
  $('form input').each(function() {
    if ($(this).val() == '') {
      empty = true;
    }
  });

  if (empty) {
    $('#register').attr('disabled', 'disabled');
  } else {
    $('#register').removeAttr('disabled');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="user_input" name="username" placeholder="name" /><br />
  <input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<form>
  <input type="text" id="user_input" name="username" placeholder="name" /><br />
  <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

我试图用$（“form”）包装所有内容。每个（function（），以便每个表单都是独立的但是它不起作用。我的英语不是很好，我真的是一个jquery新手所以任何帮助都会是赞赏。 http://jsfiddle.net/qKG5F/3200/

Answer 1

首先，您必须注意id属性应该是唯一的。因此，您必须使用我在下面执行的id属性，而不是为多个html标记提供相同的class：

id="user_input"

应该是

class="user_input"

之后当您使用选择器$('form input')时，您没有选择与发起input事件的keyup相关的表单/输入。因此，您必须首先到达与此输入相关的父级，然后定位所有子输入，如下所示：

$(this).parent().find("input")

寄存器输入相同：

 $(this).parent().find('.register')

最后这是一个DEMO：

＆＃13;

$('form input').keyup(function() {

    var empty = false;
    $(this).parent().find("input").each(function() {
  
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $(this).parent().find('.register').attr('disabled', 'disabled');
    } else {
         $(this).parent().find('.register').removeAttr('disabled');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
    <input type="submit" class="register" value="Register" disabled="disabled" />
</form>
<form>
    <input type="text" class="user_input" name="username" placeholder="name" /><br /> 
    <input type="submit" class="register" value="Register" disabled="disabled" />
</form>

＆＃13;

Answer 2

您应该考虑keyup change keypress blur个事件来启用/禁用按钮：

＆＃13;

required = function(fields) {
  console.clear();
  var valid = true;
  fields.each(function() { // iterate all
    var $this = $(this);
    if ((($this.is(':text') || $this.is('textarea')) && !$this.val())) {
      valid = false;
    }
  });
  return valid;
}

validateRealTime = function() {
  var fields = $("form :input");
  fields.on('keyup change keypress blur', function() {
    if (required(fields)) {
      {
        $("#register").prop('disabled', false);
      }
    } else {
      {
        $("#register").prop('disabled', true);
      }
    }
  });
}

validateRealTime();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  First name<br />
  <input type="text" id="user_input" name="firstname" /><br /> Name
  <br />
  <input type="name" id="name_input" name="name" /><br /> Email<br />
  <input type="email" id="email_input" name="email" /><br />
  <br/> Your Message
  <textarea name="your_message" id="your_message"></textarea>
  <br>

  <input type="submit" id="register" value="Submit" disabled="disabled" />

</form>

＆＃13;

Answer 3

问题是你在两个按钮上使用相同的id。尝试更改id或将id设为class

<form>
<input type="text" id="user_input_1" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_1" value="Register" disabled="disabled" />
</form>
<form>
<input type="text" id="user_input_2" name="username" placeholder="name" /><br /> 
<input type="submit" id="register_2" value="Register" disabled="disabled" />
</form>
(function() {
$('#user_input_1').keyup(function() {
    var empty = false;
        if ($(this).val() == '') {
            empty = true;
        }
    if (empty) {
        $('#register_1').attr('disabled', 'disabled');
    } else {
        $('#register_1').removeAttr('disabled');
    }
});
 $('#user_input_2').keyup(function() {
    var empty = false;
              if ($(this).val() == '') {
            empty = true;
        }
    if (empty) {
        $('#register_2').attr('disabled', 'disabled');
    } else {
        $('#register_2').removeAttr('disabled');
    }
});
})()

对于每个表单keyup

3 个答案: