jquery多个带模态的复选框

Question

我找不到答案，我真的不知道该怎么做。我有一个带有多个复选框和模型的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();
});
});

生成复选框，因此它们将与id account_creation_roles_1，account_creation_roles_2等。我想要定位account_creation_roles div和其中的所有复选框。谢谢。

Answer 1

您不需要遍历所有复选框。 您可以选择所有未选中（或选中）的框并测试选择的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 selector :checked selector selector context或.find()