Question

我有一张表格

 <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>

我想禁用我的提交按钮，直到所有字段都有值。现在除了单选按钮外，一切正常。

JS：

<script>

    (function() {
    $('form > input,textarea,radio').keyup(function() {

        var empty = false;
        $('form > input,textarea,radio').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
    </script>

我不知道这是不是好代码。我是jquery的新手，所以请纠正我，我做错了什么。我想禁用我的提交按钮，直到所有字段都包含单选按钮等值。请帮助我。提前谢谢

Answer 1

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

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>

Answer 2

您可以使用以下方法检查是否选中了单选按钮：

if (!$("input[name='gender']:checked").val()) {
  alert('Nothing is checked!');
} else {
  alert('One is checked');
}

如果填写所有字段，则启用提交按钮

2 个答案: