Question

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

我正在编写一个自定义验证插件“cb-required”，当且仅当前一个复选框被选中时，其作用类似于“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>

Answer 1

使用您的特定示例，.prev（“：checkbox”）不起作用，因为该方法不会向上移动DOM树 - 它只会查看直接兄弟。如果有可能另一个DOM元素位于复选框和从属输入的父元素之间，则需要使用.parent（）。prev（“：checkbox”）或parent.prevAll（“：checkbox”）。

或者，您可能希望在“.cate-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");

Answer 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");

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

检查前一个复选框所需的验证插件

2 个答案: