未重置Boostrap表单验证表单复选框

Question

我正在进行bootstrap表单验证。 这里resetForm(); 工作正常，但复选框无法重置表单提交。 我试过这样的$('.form-check-input').val(); 和$('.form-check-input').val(' '); ， $('.form-check-input').reset(); 但没有得到。 任何人都可以建议我如何重置表单提交复选框。

 $(document).ready(function() { // reCaptcha random numbers generate function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; function generateCaptcha() { $('#captchaOperation').html([randomNumber(1, 5), '+', randomNumber(1, 10), '='].join(' ')); }; generateCaptcha(); // Form validations $('#contact_form').bootstrapValidator({ fields: { first_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: 'Please supply your first name' } } }, last_name: { validators: { stringLength: { min: 2, }, notEmpty: { message: 'Please supply your last name' } } }, email: { validators: { notEmpty: { message: 'Please supply your email address' }, emailAddress: { message: 'Please supply a valid email address' } } }, city: { validators: { stringLength: { min: 4, }, notEmpty: { message: 'Please supply your city' } } }, state: { validators: { stringLength: { min: 4, }, notEmpty: { message: 'Please select your state' } } }, zip: { validators: { notEmpty: { message: 'Please supply your zip code' }, regexp: { regexp: /^\\d{10}$/, message: 'The US zipcode must contain 5 digits' } } }, agree: { validators: { notEmpty: { message: 'You must agree with the terms and conditions' } } }, captcha: { validators: { callback: { message: 'Wrong answer', callback: function(value, validator, $field) { // Determine the numbers which are generated in captchaOperation var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); return value == sum; } } } } }, // Success Message display submitHandler: function(validator, form, submitButton) { generateCaptcha(); $('#success_message').css('opacity', '1').fadeIn().delay(3000).fadeOut(); //$('#contact_form').bootstrapValidator('resetForm', true); var bv = form.data('bootstrapValidator'); // Use Ajax to submit form data $.post(form.attr('action'), form.serialize(), function(result) { }, 'json'); $('#contact_form').bootstrapValidator('resetForm', true); $('.form-check-input').reset(); } }) .on('error.form.bv', function(e) { generateCaptcha(); }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script> <form action="contact-form.php" method="POST" class="needs-validation form-horizontal" id="contact_form" novalidate> <div class="form-row row"> <div class="col-md-6 col-12 mb-3 pr-5"> <div class="form-group"> <label class="control-label">First Name</label> <div class="input-group"> <input name="first_name" placeholder="First Name" class="form-control" type="text"> </div> </div> </div> <div class="col-md-6 col-12 mb-3 pr-5"> <div class="form-group"> <label class="control-label">Last Name</label> <div class="inputGroupContainer"> <div class="input-group"> <input name="last_name" placeholder="Last Name" class="form-control" type="text"> </div> </div> </div> </div> </div> <div class="form-row row"> <div class="col-md-6 col-12 mb-3 pr-5"> <div class="form-group"> <label class="control-label">E-Mail</label> <div class="inputGroupContainer"> <div class="input-group"> <input name="email" placeholder="E-Mail Address" class="form-control" type="text"> </div> </div> </div> </div> <div class="col-md-6 col-12 mb-3 pr-5"> <div class="form-group"> <label class="control-label">City</label> <div class="inputGroupContainer"> <div class="input-group"> <input name="city" placeholder="City" class="form-control" type="text"> </div> </div> </div> </div> </div> <div class="form-row row align-items-center"> <div class="col-md-6 col-12 mb-3 pr-5 "> <div class="form-group"> <label class="control-label">state</label> <div class="inputGroupContainer"> <div class="input-group"> <input name="state" placeholder="State" class="form-control" type="text"> </div> </div> </div> </div> <div class="col-md-6 col-12 mb-3 pr-5"> <div class="form-group"> <label class="control-label">Zip Code</label> <div class="inputGroupContainer"> <div class="input-group"> <input name="zip" placeholder="Zip Code" class="form-control" pattern="^[0-9]+$" type="text"> </div> </div> </div> </div> </div> <div class="form-check form-group"> <input name="agree" class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <a href="#" data-toggle="modal" data-target="#exampleModalLong"> <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label></a> <div class="invalid-feedback">You must agree before submitting.</div> <div class="valid-feedback">Looks good!</div> </div> <div class="form-row row align-items-center"> <div class="form-group"> <label class="col-md-6 col-12 control-label" id="captchaOperation"></label> <div class="col-md-6 col-12"> <input type="text" class="form-control" name="captcha" /> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> ... </div> </div> </div> </div> <!-- Success message --> <div class="alert alert-success" role="alert" id="success_message">Thanks for contacting us, we will get back to you shortly.</div> <!-- <button class="btn btn-primary" type="submit">Send Request</button> --> <div class="col-md-4"> <div class="form-group"> <label class="control-label"></label> <button type="submit" class="btn submit">Send Request</button> </div> </div> </form> 

Answer 1

您可以通过prop方法使用jQuery修改input元素的checked属性，将其设置为false应该这样做。 这看起来像$('.form-check-input').prop(checked, false);