Question

我在页面上有两个表单，我希望在填写特定表单中的所有字段时激活表单上的特定按钮，但是当填写特定表单字段时使用当前脚本以及其他字段页面上的其他表单未填写按钮仍然无效

<form method=post id="regis">
    <p>Register</p>
    <p>
        <input name="username" type="text" id="first_name">
        <input name="password" type="text" id="second_name">
        <input type="submit" value="register" id="register" disabled>
    </p>
</form>
<p>
    <label for="textfield"></label>
    <label for="textfield2"></label>
</p>
<form name="form1" method="post" action="">
    <p>Login</p>
    <p>
        <label for="password2"></label>
        <input type="text" name="email2" id="textfield2">
        <label for="textfield3"></label>
        <input type="text" name="password2" id="textfield3">
        <input type="submit" value="login" id="login2" disabled>
    </p>
</form>

$(document).ready(function () {
    var $input = $('input:text'),
        $register = $('#register');
    $register.attr('disabled', true);

    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    });
});

Answer 1

您可以使用.prop方法：

$(document).ready(function () {
  var $input = $('input:text'),
      $register = $('#register');

  $input.keyup(function () {
    var disable = false;

    $input.each(function () {
      // if there is atleast one field that is empty
      // disable it
      if (!$(this).val()) {
        disable = true; 
        // terminate the .each loop
        return false;
      }
    });

    $register.prop('disabled', disable);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input tyupe="text"/>
  <input tyupe="text"/>
  <button id="register" disabled>Ok</button>
  </form>

Answer 2

尝试使用更受限制的jQuery选择器来选择输入$input = $('#regis input:text')

$(document).ready(function () {
    var $input = $('#regis input:text'),
        $register = $('#register');
    $register.attr('disabled', true);

    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });
        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form method=post id="regis">
    <p>Register</p>
    <p>
        <input name="username" type="text" id="first_name">
        <input name="password" type="text" id="second_name">
        <input type="submit" value="register" id="register" disabled>
    </p>
</form>
<p>
    <label for="textfield"></label>
    <label for="textfield2"></label>
</p>
<form name="form1" method="post" action="">
    <p>Login</p>
    <p>
        <label for="password2"></label>
        <input type="text" name="email2" id="textfield2">
        <label for="textfield3"></label>
        <input type="text" name="password2" id="textfield3">
        <input type="submit" value="login" id="login2" disabled>
    </p>
</form>

Answer 3

您可以检查输入元素的值。如果您不是空的，您可以调用该按钮启用。只需添加：

if($('#textfield2').val()!='' && $('#textfield3').val()!='')
{
    $('#login2').removeAttr('disabled');
}

此代码段可用于您的第二个表单。第一个也是如此。当然，这是一个记录良好的问题，因此您可以更好地搜索网络。也请检查here。

填写特定表单中的字段时，启用页面上的按钮

3 个答案: