【发布时间】：2021-06-17 10:12:25
【问题描述】：
好的，我有一个用户提交的表单，需要或不需要，他们在列表中至少勾选一个电子邮件选项，具体取决于另一个复选框。
我正在使用 Parsley.js 2.8.2（我知道它有点落后）
<form method="POST" id="completeForm" action="/api/order/dispatch/{{ order.kOrder }}">
<div class="alert alert-warning">
<b>Instructions</b>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="data[mail_order]" id="shipping" />
<label class="form-check-label" for="shipping"><b>SHIPPING</b></label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="data[collect]" id="collection" />
<label class="form-check-label" for="collection"><b>COLLECTION</b></label>
</div>
</div>
<label>Send Shipping Email to:</label>
<div id="emailsList">
<div class="form-check" style="margin-bottom: 0.5rem">
<!-- THIS IS THE MULTIPLE I AM TRYING TO TOGGLE -->
<input class="form-check-input billing" type="checkbox" data-parsley-multiple="selectOneEmail" data-parsley-mincheck="1" data-parsley-required data-parsley-error-message="Please choose at least one email address" id="send-contact-{{ list.contacts.order.billing.kContact }}" name="to_emails[{{ list.contacts.order.billing.kContact }}]"/>
<label class="form-check-label" for="send-contact-{{ list.contacts.order.billing.kContact }}">
<b>Billing: </b>{{ list.contacts.order.billing.firstname }} {{ list.contacts.order.billing.lastname }} <{{ list.contacts.order.billing.email }}>
</label>
<br/>
<input class="form-check-input delivery" type="checkbox" data-parsley-multiple="selectOneEmail" id="send-contact-{{ list.contacts.order.delivery.kContact }}" name="to_emails[{{ list.contacts.order.delivery.kContact }}]"/>
<label class="form-check-label" for="tracksend-contact-{{ list.contacts.order.delivery.kContact }}ingId">
<b>Delivery: </b>{{ list.contacts.order.delivery.firstname }} {{ list.contacts.order.delivery.lastname }} <{{ list.contacts.order.delivery.email }}>
</label>
</div>
</div>
<button type=select>COMPLETE</button>
</form>
这是表格 - 我正在尝试将要求切换为“请至少选择一个电子邮件地址”
我目前正在使用这个脚本：
$(document).ready(function () {
$("form#completeForm").on("click", "input[type=checkbox]#collection", CompleteOrder.ToggleCollection);
});
function ToggleCollection(event) {
var el = $(event.target);
var modal = el.closest("div.modal");
var form = $("form#completeForm", modal);
var Shipping = $("input#Shipping", modal);
var enabled = el.prop("checked");
var emailCheckBoxes = $("div#emailsList input[type=checkbox]", modal);
//console.log("Collection", enabled, emailCheckBoxes);
if(enabled) {
FastShipping.prop("disabled", true);
//emailCheckBoxes.prop("disabled", true);
emailCheckBoxes.attr("required", false);
$(emailCheckBoxes[0]).parsley().removeConstraint("mincheck");
$(emailCheckBoxes[0]).parsley().removeConstraint("required");
$(emailCheckBoxes[0]).parsley().removeError("errorMessage");
emailCheckBoxes.each(function () {
$(this).parsley().removeConstraint("multiple");
});
form.parsley().reset();
} else {
FastShipping.prop("disabled", false);
//emailCheckBoxes.prop("disabled", false);
emailCheckBoxes.prop("required", true);
$(emailCheckBoxes[0]).parsley().addConstraint({ "mincheck": 1 });
$(emailCheckBoxes[0]).parsley().addConstraint({ "required": true });
$(emailCheckBoxes[0]).parsley().addError({ "errorMessage": "Please choose at least one email address" });
emailCheckBoxes.each(function () {
$(this).parsley().addConstraint({ "multiple": "selectOneEmail" });
});
form.parsley().reset();
}
}
简单地说，我希望在收集复选框未选中时要求处于活动状态，如果收集复选框选中则禁用。
该函数似乎没有错误地运行，但它并没有删除验证要求。如果我选中 COLLECTION 复选框，它仍然会失败并在表单上询问“请至少选择一个电子邮件地址”。
由于 parsley.js 的文档相当少，我很苦恼，想知道是否有其他人可以对此有所了解。还值得注意的是，在某些情况下电子邮件地址复选框的数量超过 2 个，因此它需要支持 #emailsList div 中的任意复选框元素列表。
谢谢
【问题讨论】：
-
var modal = el.closest("div.modal");我在您的 html 中没有看到类模式。有什么想上传的吗？ -
另外，
I want the requirement to be active，你是什么意思要求被激活？ -
哦，对不起，表单包含在 Boostrap 模态对话框（'div.modal' 包装器）中。我用它来包含我所有的选择器到模态的innerHTML，以防止任何选择器将元素拾取到其他表单等。所以 active 我的意思是我需要用户至少检查一个电子邮件复选框（在欧芹倍数中）。当不活动我希望表单可以提交并勾选no电子邮件复选框（我们不会向亲自收集的客户发送电子邮件）
-
您的意思是，当您选择指令>收款时，必须选择Billing 或Delivery？否则无法选择Billing and Delivery？
-
或多或少与此相反。当您取消选择指令>收款（即checked=false）时，需要选择Billing或Delivery，否则如果您选择指令>收款则不需要选择结算或交付。
标签： javascript parsley.js