如果选中了先前的复选框，则需要验证插件答案

【问题标题】：Validation plugin for required if previous checkbox is checked如果选中了先前的复选框，则需要验证插件
【发布时间】：2013-12-04 21:33:17
【问题描述】：

如何使用 jquery 找到元素的前一个复选框？

我正在编写一个自定义验证插件“cb-required”，当且仅当前一个复选框被选中时，它就像“必需”一样。这个想法是一个复选框，后跟一个或多个相关的文本字段和/或选择。无论如何，我并不关心隐藏或禁用依赖字段，我只想在选中复选框时强制执行“必需”。

现在我只是想获得一个正确弹出的警报，而 .prev() 并没有起到作用：

$.validator.addMethod("cb-required", function(value, element) {
    alert("current="+$(element).attr("name")+" / previous="+$(element).prev(":checkbox").attr("name"));
    return true;
}, "This information is required");

表单字段如下所示：

<input name="EMVEnabled" type="checkbox" value="1" />EMV enabled<br />
<span style="font-size:0.8em">
    &nbsp;&nbsp;&nbsp;&nbsp;<strong>EMV Template</strong>
    <select name="EMVTemplate" size="1" class="cb-required">
        <option></option>
        <option value="1">Template 1</option>
        <option value="2">Template 2</option>
    </select><br />
</span>
<br />
<input name="CashAdvance" type="checkbox" value="1" />Cash advance<br />
<br />
<input name="ExpressPay" type="checkbox" value="1" />Express pay<br />
<span style="font-size:0.8em">
    &nbsp;&nbsp;&nbsp;&nbsp;<strong>Floor Limit Min</strong>
    <input name="ExpressPayFloorMin" type="text" value="" size="12" maxlength="12" class="cb-required numeric" /><br />
    &nbsp;&nbsp;&nbsp;&nbsp;<strong>Floor Limit Max</strong>
    <input name="ExpressPayFloorMax" type="text" value="" size="12" maxlength="12" class="cb-required numeric" /><br />
</span>

【问题讨论】：

标签： javascript jquery validation checkbox

【解决方案1】：

使用您的具体示例， .prev(":checkbox") 不起作用，因为该方法不会向上移动 DOM 树 - 它只会查看直接兄弟姐妹。如果复选框和依赖输入的父级之间可能存在另一个 DOM 元素，则您想使用 .parent().prev(":checkbox") 或 parent.prevAll(":checkbox")。

或者，您可能希望考虑在“cb-required”规则的 .validate({}) 声明中指定用于验证的确切复选框（通过 jquery 选择器字符串），而不是依赖于DOM 的结构。这将使您可以灵活地将复选框放置在 DOM 中相对于取决于其选中状态的输入的任何位置，如下所示：

$form.validate({
    rules: {
        ExpressPayFloorMin: {
            "cb-required": "[name=ExpressPay]"
        }
    }
});

使用此方法，您需要在验证函数中添加第三个参数“param”，即 .validate() 中指定的选择器：

$.validator.addMethod("cb-required", function(value, element, param) {
    return $(param).prop("checked") && ($(element).val().length > 0);
}, "This information is required");

【讨论】：

我认为这是我使用 .prev() 的问题，我只是想不出使用父级的解决方案。另一种方法是我想到的，但我希望有一个更通用的解决方案。

【解决方案2】：

信不信由你，您的替代方法让我想到了另一种解决问题的方法。在 html 中，我将复选框和依赖项包装在具有 class="cb-group" 属性的 div 中。然后以下调整起作用：

$.validator.addMethod("cb-required", function(value, element) {
    alert("current="+$(element).attr("name")+" / previous="+$(element).closest(".cb-group").find(":checkbox").attr("name"));
    return true;
}, "This information is required");

现在我可以继续并完成真正的逻辑。谢谢。

【讨论】：