使用自定义复选框 CSS 的 jQuery 验证在表单验证后不起作用

Question

我在表单上使用这些自定义 CSS 复选框，但注意到在我提交表单（然后运行 ​​jQuery 验证）后，自定义复选框不再显示。复选框行为仍然“有效”，只是复选框不再以自定义方式设置样式。

我整理了一个小提琴来展示这个：https://jsfiddle.net/gamehendgeVA/z31q59hc/8/

另外，我将在此处包含代码。

您可以看到，在默认情况下，选中和取消选中复选框都可以正常工作。在您提交表单的那一刻，复选框不再设置样式（但是，它仍然“有效”，只是不再带有自定义样式复选标记的蓝色背景）。

任何关于如何最好地“解决”这个问题的建议都很棒。

谢谢！

HTML

<form id="addressForm" name="addressForm" method="post">
  <div class="row">
<div class="col-md-12">
  <div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
    <div class="checkbox-inline">
      <label class="checkboxContainer">I have read and agree to the Privacy Policy
        <input type="checkbox" name="privacyPolicyCheckbox" id="privacyPolicyCheckbox" value="no">
        <span class="checkmark"></span>
      </label>
    </div>
  </div><!-- /.alertBox -->
</div>
  </div>
  <div style="margin-top:20px;"><input type="submit" value="Go to Next Screen" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;" /></div>
</form>

CSS

 /* Customize the label (the container) */
.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
 /* margin-bottom: 12px; */
  cursor: pointer;
  font-size: 18px;/* was 22px */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 13px;/* was 0 */
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;/* was #eee */
  border: 1px solid #333;/* added */
 }
 /* On mouse-over, add a grey background color */
 .checkboxContainer:hover input ~ .checkmark {
  background-color: #d1d1d1;/* was #ccc */
  }
 /* When the checkbox is checked, add a blue background */
 .checkboxContainer input:checked ~ .checkmark {
  background-color: #2196F3;
 }
 /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
 .checkboxContainer .checkmark:after {
 left: 10px;
  top: 6px;
  width: 6px;
   height: 11px;
   border: solid white;
   border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

JS

    jQuery.validator.setDefaults({
        errorElement: "span",
        errorClass: "help-block",
        highlight: function(element) {
            jQuery(element).parent().is('.has-success, .has-error') ?
                jQuery(element).parent().removeClass('has-success').addClass('has-error') :
                jQuery(element).wrap('<span class="has-error"></span>');
        },
        unhighlight: function(element) {
            jQuery(element).parent().is('.has-success, .has-error') ?
                jQuery(element).parent().removeClass('has-error').addClass('has-success') :
                jQuery(element).wrap('<span class="has-success"></span>');
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "nonMemberType") //not needed on this screen, but keeping placeholder syntax
                error.insertAfter("#selectNonMemberValidationBlock"); //not needed, see above
            else {
                error.insertAfter(element);
            }
        }
    });

    jQuery("#addressForm").validate({
        rules: {
            'privacyPolicyCheckbox': {
                required: true
            },
        },
        messages: {
            'privacyPolicyCheckbox': {
                required: "Please indicate that you agree to the Terms and Conditions by checking this box."
            }
        }
    });

Answer 1

highlight: function(element) {
    jQuery(element).parent().is('.has-success, .has-error') ?
        jQuery(element).parent().removeClass('has-success').addClass('has-error') :
        jQuery(element).wrap('<span class="has-error"></span>'); // <- ???
},
unhighlight: function(element) {
    jQuery(element).parent().is('.has-success, .has-error') ?
        jQuery(element).parent().removeClass('has-error').addClass('has-success') :
        jQuery(element).wrap('<span class="has-success"></span>'); // <- ???
},

我认为您不应该根据验证通过/失败在span 元素中动态“包装”任何内容。这没有意义。 highlight 和 unhighlight 应该做的就是添加/删除类。

通过调用.wrap('<span.../>')，您正在改变 DOM 的结构，从而破坏任何影响复选框构造位置/方式的 jQuery DOM 遍历代码。

if/then/else 条件逻辑在这里甚至没有多大意义，因为这两个函数都在测试是否存在相同的类。

通过删除条件逻辑，从而删除.wrap()，您的问题就消失了。

highlight: function(element) {
    jQuery(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
    jQuery(element).parent().removeClass('has-error').addClass('has-success');
},

演示：jsfiddle.net/wdecm1u5/