免责声明：我只使用了大约一周的 jQuery 和大约两周的 HTML/CSS。
我有一个包含几个复选框和各种文本输入字段的表单。第一个复选框是#ship_to_billing。如果选中，它将隐藏并且不需要字段集#shipping_info。如果未选中，则字段集中的所有字段都必须具有某些值。因此，基本上必须选中 ship_to_billing 复选框，或者必须填写字段集字段才能让用户提交表单，否则他们会收到警报，指示他们完成相应的区域。这一切都很好地单独工作。但是，我只是在表单底部添加了一个额外的必需复选框，并且无法弄清楚如何将其合并到我当前的 jQuery 设置中。新复选框是#age_verification。它需要独立于表单上的任何其他输入进行检查。如果不，在继续之前，他们应该会收到提醒以选中该框。在为最后一个复选框添加验证后，没有任何效果，它只是让用户提交表单而无需填写或检查任何输入。
还想知道如果他们尝试在不填写任何内容的情况下提交表单，或者是否有更好的方法，这样做是否会导致可能同时弹出两个警报。
注意 HTML 在表单中（form action="/cart/add" method="post"）
<a type="button" class="btn btn-primary" href="#product-options" data-toggle="modal">Buy This!</a>
<div class="modal hide fade" id="product-options">
<div class="modal-header center">
<a class="close" data-dismiss="modal">x</a>
<h3>When, Where and How?</h3>
</div>
<div class="modal-body l-m">
{% include 'datepicker' %}
<hr>
<input type="hidden" name="properties[ship_to_billing]" value="" />
<label for="ship_to_billing" style="max-width:335px;">
<input id="ship_to_billing" type="checkbox" name="properties[Ship to Billing Address]" value="Yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} />
<font size=1>Check here to have items shipped to your billing address (collected during checkout). Otherwise please fill out the information below.</font>
</label><br />
<fieldset id="shipping_info">
<label for="shipping_name">Name of Recipient:</label>
<input class="input-xlarge" type="text" id="shipping_name" placeholder="Name" name="properties[Recipient]" />
<label for="address_street">Shipping Address:</label>
<input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" />
<input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" />
<input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" />
<input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" />
</fieldset>
<p>
<label for="gift_msg">Gift Message : (optional)</label>
<textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea>
</p>
<p>
<input type="hidden" name="properties[age_verified]" value="" />
<label for="age_verified" style="max-width:335px;">
<input id="age_verification" type="checkbox" name="properties[Age Verified]" value="Yes" {% if properties.age_verified %} checked="checked"{% endif %} required="required" />
<font size=1>This gift contains alcohol. By checking this box you certify you are 21yrs of age or older. An adult signature with ID will be required upon delivery.</font>
</label>
</p>
</div>
<div class="modal-footer">
<div class="btn-group">
<button href="#" class="btn" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="return validateShipping();" id="addtocart">Add To Cart</button>
</div>
</div>
</div>
然后是 jQuery：
<script>
// Hides shipping info fieldset if ship to billing is checked
$(function(){
$("#ship_to_billing").change(function(){
if ($(this).is(":checked"))
$("#shipping_info").hide();
else
$("#shipping_info").show();
});
});
// Validates address fields are filled out unless ship to billing is checked...
function validateShipping() {
if (!$("#ship_to_billing").is(":checked")) {
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function(){
if ($(this).val() == '') {
ready = false;
return false;
}
});
if (!ready) {
alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!");
return false;
}
}
return true;
}
// This is where my trouble is
if (!$('#age_verified').is(':checked')) {
alert("Please check box to verify you are 21 years of age or older.");
return false;
}
});
</script>