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

jQuery的多个复选框与模式

1 个答案: