且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如果所有字段均已填写,则启用提交按钮

更新时间:2023-02-08 23:27:53

您需要使用prop()并检查type.如果类型为radio,则可以添加验证检查:

You need to use prop() and check the type. If the type is radio, you can add validation checks:

required = function(fields) {
  var valid = true;
  fields.each(function() { // iterate all
    var $this = $(this);
    if ((($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text and textarea
      ($this.is(':radio') && !$('input[name=' + $this.attr("name") + ']:checked').length)) { // radio
      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();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Username<br />
  <input type="text" id="user_input" name="username" /><br /> Password
  <br />
  <input type="password" id="pass_input" name="password" /><br /> Confirm Password<br />
  <input type="password" id="v_pass_input" name="v_password" /><br /> Email
  <br />
  <input type="text" id="email" name="email" /><br /> <br/>
  <textarea name="adress" id="adress"></textarea>
  <br>

  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="submit" id="register" value="Register" disabled="disabled" />

</form>