0

该表单有两个复选框（cbDeclined 和 cbIsOOfFac）、两个文本字段和一个下拉列表（txtHeight、txtWeight、ddlDevice）。

如果选中任一复选框，则禁用其他控件并且其他控件的规则不适用。以下是目前的规则：

$('form').validate({
    highlight: function (element, errorClass) {
        $(element).addClass("invalidElem");
    },
    unhighlight: function (element, errorClass) {
        $(element).removeClass("invalidElem");
    },
    errorPlacement: function (error, element) {
        var parent = element.parent();
        parent.append(error);
    },
    errorElement: "div",
    errorClass: "errorMsg"
});

function HeightWeightCtrlsEnabled() { return !cbDeclined.is(':checked') && !cbIsOOfFac.is(':checked'); }

txtHeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 3, min: 1, digits: true });
txtWeight.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); }, maxlength: 4, min: 1, digits: true });
ddlDevice.rules("add", { required: function (element) { return HeightWeightCtrlsEnabled(); } });

function UpdateTextBoxes() {
    var disableCtrls = !HeightWeightCtrlsEnabled();

    txtHeight.prop('disabled', disableCtrls);
    txtWeight.prop('disabled', disableCtrls);
    ddlDevice.prop('disabled', disableCtrls);

    if (disableCtrls) {
        txtHeight.val('');
        txtWeight.val('');
        ddlDevice.val('');
    }
}

cbDeclined.click(function () {

    if (cbDeclined.is(':checked'))
        cbIsOOfFac.attr('checked', false);

    UpdateTextBoxes();
});

cbIsOOfFac.click(function () {

    if (cbIsOOfFac.is(':checked'))
        cbDeclined.attr('checked', false);

    UpdateTextBoxes();
});

问题出现在以下情况下：用户在 txtWeight 中输入内容，单击提交以使 ddlDevice 和 txtHeight 都突出显示，因为它们是必需的，然后...用户单击 cbDeclined 和 cbIsOofFac。亮点不会消失。我试图弄清楚如何在高度周围突出显示并下降以消失。

我试图创建一个完全正常工作的 jsFiddler，但我无法让任何东西工作，尽管一切看起来都是正确的。这是链接（我不能发布链接，所以我扩大了一点）

jsfiddle dot net/scarleton/9hDZQ/12/

如果您删除最后一个 /12/，您将看到我的第一个版本，它是从真实的东西中剪切/粘贴的。

根据建议，我尝试添加 $('form').valid(); 一些地方。

当我将它添加到 UpdateTextBoxes() 函数的末尾时，它们开始突出显示，而不是我想要的。

当我在任一单选按钮的 click() 事件之后添加它时，文本会消失，但实际控件保持突出显示。看起来规则所需属性的功能可能没有完全工作。真正有趣的是：当我输入一个高度时，点击 ，然后重量和设备会突出显示，并在它们下方显示错误消息。当我单击其中一个单选按钮时，文本会消失，但突出显示不会。但是......高度没有突出显示，它保持正常。

4

1 回答 1

1

工作小提琴： http: //jsfiddle.net/9hDZQ/15/（缺少突出显示的 CSS 样式，但已正确添加/删除类）

当您选中其中一个框时，没有代码告诉验证插件重新检查表单。在每个点击处理程序的底部添加$('form').valid();以强制重新验证对我有用：

    cbDeclined.click(function () {

        if (cbDeclined.is(':checked'))
            cbIsOOfFac.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();
    });

    cbIsOOfFac.click(function () {

        if (cbIsOOfFac.is(':checked'))
            cbDeclined.attr('checked', false);

        UpdateTextBoxes();
        $('form').valid();            
    });
于 2012-09-20T22:43:17.997 回答