JQuery несколько флажков с модальным - PullRequest
Новая
       4

JQuery несколько флажков с модальным

0 голосов
/ 01 марта 2019

Я не могу найти ответ на это, и я действительно не знаю, как это сделать.У меня есть HTML-форма с несколькими флажками и моделью.Минимум для отправки формы с помощью кнопки «Отправить» - один флажок.Скрипт jquery должен пройти через все флажки и посмотреть, выбран ли один или несколько.Если ни один из них не выбран, то модем начальной загрузки должен появиться в виде предупреждающего сообщения, а форма не должна отправляться.

html выглядит следующим образом: 

<form name="account_creation" method="post" action="" novalidate="novalidate" role="form">
<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <div id="account_creation_roles">
                <div class="checkbox"><label for="account_creation_roles_1">
                        <input type="checkbox" id="account_creation_roles_1" name="account_creation[roles][]"
                               value="1" checked="checked">USER_ADMIN</label>
                </div>
                <div class="checkbox"><label for="account_creation_roles_2">
                        <input type="checkbox"
                               id="account_creation_roles_2"
                               name="account_creation[roles][]"
                               value="2" checked="checked">
                        USER</label>
                </div>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-primary" id="button-submit" data-toggle="modal" data-target="#modal-warning" type="submit">Submit</button>
<div id="modal" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

jquery код, который у меня пока есть 

$(document).ready(function () {
var $form = $('form[name="account_creation"]');

$form.on('submit', function(e) {
    $("input:checkbox").each(function() {
        if ($('input[type="checkbox"]').not(':checked').length == 0) {
            $(this).parents('form').submit();
        } else {
            $('#modal').show();
        }
    });
    e.preventDefault();
});
});

Флажки сгенерированы, поэтому они будут с идентификатором account_creation_roles_1, account_creation_roles_2 и т. д. Я хочу настроить таргетинг на account_creation_roles div и все флажки в нем.Спасибо.

1 Ответ

0 голосов
/ 01 марта 2019

Вам не нужно перебирать все флажки.
Вы можете выбрать все непроверенные (или отмеченные) поля и проверить length выбора.

Ниже япроверка для полей, которые отмечены .
Если длина больше нуля, то по крайней мере один флажок отмечен, и форма отправляется.В противном случае отображается модальное значение. 

$(function() {

  var $form = $('form[name="account_creation"]');
  var $acctCreationRoles = $('#account_creation_roles');

  $form.on('submit', function(e) {
    e.preventDefault();
    var atLeastOneChecked = $(':checkbox:checked', $acctCreationRoles).length > 0;
    if (atLeastOneChecked) {
      //$form.submit();
      console.log('submit');
    } else {
      //$('#modal').show();
      console.log('modal');
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="account_creation" method="post" action="">
  <div id="account_creation_roles">
    <div><input type="checkbox" checked="checked"> USER_ADMIN</div>
    <div><input type="checkbox" checked="checked"> USER</div>
  </div>
  <button type="submit">Submit</button>
</form>

Также см .:
:checkbox селектор
:checked селектор
контекст селектора или .find()

...