javascript - 使用取决于 jQuery Validation 插件

Question

我有一个带有一堆文本框的表单，这些文本框默认情况下是禁用的，然后通过使用每个文本框旁边的复选框启用。

启用时，这些文本框中的值必须是有效数字，但禁用时，它们不需要值(很明显)。我正在使用 jQuery Validation 插件来执行此验证，但它似乎没有达到我的预期。

当我单击复选框并禁用文本框时，尽管我已将 depends 子句添加到规则中(请参见下面的代码)，但我仍然收到无效字段错误。奇怪的是，实际发生的是错误消息显示一瞬间然后消失。

这是复选框和文本框列表的示例:

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

这是我正在使用的 jQuery 代码

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

忽略每个 li 中的隐藏字段，因为我使用的是 asp.net MVC 的 Html.Checkbox 方法。

Answer 1

使用“忽略”选项 ( http://docs.jquery.com/Plugins/Validation/validate#toptions ) 可能是您处理此问题的最简单方法。取决于您在表格上还有什么。例如，如果您有其他控件被禁用但由于某种原因您仍然需要验证，则您不会过滤禁用的项目。但是，如果该路线不起作用，使用额外的类进行过滤(使用复选框添加和删除)应该可以让您到达您想去的地方，但更容易。

即

        $('form').validate({
            ignore: ":disabled",
            ...
        });