Включить кнопку отправки, если по крайней мере одно поле имеет заполненное значение или выбранное выпадающее меню - PullRequest
2 голосов
/ 06 января 2020

У меня есть тег <select> вместе с <input>, как показано ниже, но он не работает.

Как включить кнопку отправки, если хотя бы одно поле имеет значение или выбрано вариант? Как включить кнопку отправки для выбора нескольких (and/& в общем) полей?

Любая помощь приветствуется!

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

Ответы [ 3 ]

4 голосов
/ 06 января 2020

Я бы использовал input и change на form, а не keyup на полях, поскольку, конечно, вы можете выбирать вещи с помощью мыши. Я бы также использовал prop, а не attr, чтобы установить 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>

Отдельно я думаю, что, вероятно, я бы использовал более общий селектор при выборе полей для проверки, и остановил бы проверку, как только узнаю, что мне нужно включить форму:

$(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>
2 голосов
/ 06 января 2020

Вы можете использовать событие change вместо keyup

$(document).ready(function() {
  $( '.field input,.field select' ).change(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>
1 голос
/ 06 января 2020

Вам просто нужно использовать change вместо keyup

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

    $('.actions input').attr('disabled', hasValue ? false : 'disabled');
  });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...