未使用jQuery验证器选中Css样式复选框时

以下是使用css选择器修复此问题的最简单的css破解方法。只需将其添加到css中即可。

  .checkbox.valid ~ strong {
color:#000!important;
}
input.error,  .checkbox.error  ~ strong{
    border: 1px dotted red!important;
  color:red!important;
}
label.error {    	
		display: none!important;  
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
	<script>
	$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});
	$().ready(function() {
		// validate signup form on keyup and submit
		$("#signupForm").validate({
			rules: {
				firstname: "required",
				lastname: "required",
				username: {
					required: true,
					minlength: 2
				},
				password: {
					required: true,
					minlength: 5
				},
				confirm_password: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				topic: {
					required: "#newsletter:checked",
					minlength: 2
				},
				agree: "required"
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 2 characters"
				},
				password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long"
				},
				confirm_password: {
					required: "Please provide a password",
					minlength: "Your password must be at least 5 characters long",
					equalTo: "Please enter the same password as above"
				},
				email: "Please enter a valid email address",
				agree: "Please accept our policy",
				topic: "Please select at least 2 topics"
			}
		});
		// propose username by combining first- and lastname
		$("#username").focus(function() {
			var firstname = $("#firstname").val();
			var lastname = $("#lastname").val();
			if (firstname && lastname && !this.value) {
				this.value = firstname + "." + lastname;
			}
		});
		
		
	});
	</script>
	
<div id="main">
	
	<form class="cmxform" id="signupForm" method="get" action="">
		<fieldset>
			<legend>Validate a complete form</legend>
			<p>
				<label for="firstname">Firstname</label>
				<input id="firstname" name="firstname" type="text">
			</p>
			<p>
				<label for="lastname">Lastname</label>
				<input id="lastname" name="lastname" type="text">
			</p>
			<p>
				<label for="username">Username</label>
				<input id="username" name="username" type="text">
			</p>
			<p>
				<label for="password">Password</label>
				<input id="password" name="password" type="password">
			</p>
			<p>
				<label for="confirm_password">Confirm password</label>
				<input id="confirm_password" name="confirm_password" type="password">
			</p>
			<p>
				<label for="email">Email</label>
				<input id="email" name="email" type="email">
			</p>
			<p>
				<label for="agree">Please agree to our policy</label>
				<input type="checkbox" class="checkbox" id="agree" name="agree">
              <strong>I Accept</strong>
			</p>
		
		
			<p>
				<input class="submit" type="submit" value="Submit">
			</p>
		</fieldset>
	</form>

您可以使用Jquery validate回调函数（成功时，显示错误时）:

$("#registerForm").validate({
  success: function() {
    $("#L_Accept").css('color', 'black');
  },
  showErrors: function() {
    $("#L_Accept").css('color', 'red');
    this.defaultShowErrors();
  },
  
  /* Disable (focusout, keyup, click) Events
     to force check validation by Submit Button ONLY.
  */
  onfocusout: false,
  onkeyup: false,
  onclick: false
});

label.error {
  display:none !important; //hide default error label.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<h1>Form Validation Example</h1>
<form id='registerForm' name='registerForm' method='post' action='' >
  <label for="cbx2">
    <input name="TermsCondition" type="checkbox" value="on" style="float:left;" class="required" id="cbx2">
    <strong id="L_Accept">I Accept</strong>
  </label>
  
  <input type='submit' name='Submit' value='Submit' />
</form>

您可以将css :not()与参数:checked一起使用，相邻的同级+选择器；在onsubmit事件中，如果#cbx2不是checked，则添加将#cbx2 color设置为red 的className

document.getElementById("form").onsubmit = function(event) {
  var message = this.querySelector("#cbx2");
  if (!message.checked) message.className = "invalid";
}

#cbx2:not(:checked).invalid + strong {
  color: red;
}

<form id="form">
  <label for="cbx2">
    <input name="TermsCondition" type="checkbox" value="on" style="float:left;" class="required" id="cbx2">
    <strong>I Accept</strong>
  </label>
  <input type="submit" />
</form>