如果至少一个字段具有填充值/或选定的下拉列表，则启用提交按钮 [英] Enable submit button if atleast one field has filled value / or a selected dropdown

问题描述

我与<input>一起具有<select>标记，如下所示，但它不起作用.

I have a <select> tag along with <input>, as below, but it doesn't work.

如果至少一个字段具有值或选定的选项，如何启用提交按钮?如何在多个(通常为and/&)字段选择上启用提交"按钮?

How can I enable the submit button if at least one field has a value or a selected option? How can I enable the submit button on multiple (and/& in general) fields selection?

感谢您的帮助！

$(document).ready(function() {
  $('.field input,.field select').keyup(function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

推荐答案

我会在form上使用input和change，而不是在字段上使用keyup，因为您当然可以使用鼠标.我还要使用prop而不是attr来设置disabled:

I would use input and change on the form, rather than keyup on the fields, since of course you can pick things with the mouse. I'd also use prop, not attr, to set disabled:

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = $('#username,#password,#position').filter((index, input, select) => input.value.length > 0).length;

    $('.actions input').prop('disabled', !hasValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

另外，我认为在选择要检查的字段时，我可能会使用更通用的选择器，并在知道需要启用表单后立即停止检查:

Separately, I think I'd probably use a more general selector when selecting the fields to check, and stop the check as soon as I know I need to enable the form:

$(document).ready(function() {
  $('form').on("input change", function() {
    var hasValue = false;
    $(this).find("input[type=text], input[type=password], select").each(function() {
      if (this.value) {
        hasValue = true;
        return false;
      }
    });
    $(this).find('.actions input').prop('disabled', !hasValue);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <select id="position">
        <option value="">position</option>
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

这篇关于如果至少一个字段具有填充值/或选定的下拉列表，则启用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！