Question

我有这个javascript：

$(function () {
    $.fn.enable = function () {
        return this.show().removeAttr("disabled");
    }

    $.fn.disable = function () {
        return this.hide().attr("disabled", "disabled");
    }

    var incomeType = $("#MyModel_IncomeTypeCheckBox");
    var incomeTypeStatusSection = $("#incomeTypeStatusDiv, #incomeTypeStatusDiv input, #incomeTypeStatusDiv textarea, #incomeTypeStatusDiv select");
    setControls();

    incomeType.change(function () {
        setControls();
    });

    function setControls() {
        switch (incomeType.val()) {
            case "FullTime":
                incomeTypeStatusSection.disable();
                break;
            case "PartTime":
                incomeTypeStatusSection.disable();
                break;
            case "SelfEmployed":
                incomeTypeStatusSection.enable();
                break;
            case "SocialSecurity":
                incomeTypeStatusSection.disable();
                break;
            case "Retirement":
                incomeTypeStatusSection.disable();
                break;
            case "ChildSupport":
                incomeTypeStatusSection.disable();
                break;
            case "Maintenance":
                incomeTypeStatusSection.disable();
                break;
            case "Other":
                incomeTypeStatusSection.disable();
                break;
        }
    }
});

我认为的代码很简单：

<div id="incomeTypeStatusDiv">
   <!--Show some hidden inputs here-->
</div>

MyModel.IncomeTypeCheckBox基于enum，与上面的case值相对应。

例如，我可以使用带有下拉列表的上述javascript。选择将显示/隐藏相应的<div>。

我现在尝试使用相同的代码显示/隐藏基于复选框列表选择，但没有成功。我要隐藏的<div>正在显示而不是隐藏。我错过了什么，它不适用于复选框列表？如何使用复选框列表进行此操作（即，如果我单击“SelfEmployed”复选框，它将显示相应的<div>，当我取消选中“SelfEmployed”复选框时，它将隐藏<div>？< /强>

我能做到：

$(document).ready(function () { $("input[name$='stepincomeinformation.incometypecheckbox']").click(function () { var check_value = $(this).val(); if (check_value == 'selfemployed') { $("#incometypecheckbox_selfemployed").toggle(this.checked); } }); $("#incometypecheckbox_selfemployed").hide(); });

但是如果<div>被隐藏，它将不允许我继续前进，因为它正在尝试验证。如果它隐藏了，则其他javascript不会验证<div>。

javascript基于Validating a dynamic UI with Mvc2，对我来说效果很好。它用于在<div>被隐藏时禁用验证（并使用mod MicrosoftMvcValidation.js以及绑定器。

感谢任何帮助。

见下面的最终结果（基于答案）

Answer 1

在您发布的代码中，设置了incomeType变量：

var incomeType = $("#MyModel_IncomeTypeCheckBox");

此时，我猜测MyModel_IncomeTypeCheckBox是分配给所有incomeType复选框的名称。

如果是这种情况，那么这可能解释了为什么存在问题。

首先，因为MyModel_IncomeTypeCheckBox是名称而不是ID，所以jQuery无法通过$('#MyModel_IncomeTypeCheckBox')

访问该值

其次，即使jQuery可以访问正常表单提交中MyModel_IncomeTypeCheckBox将包含的内容，其余代码仅在选中单个框时才有效，因为要检查的多个框将导致{{1包含所选复选框的逗号分隔的复选框值字符串。

所以，这里有两种选择。

第一个选项是通过其ID单独检查每个复选框的丑陋任务，但这不是您想要的，因为它很痛苦且效率低下。

第二个选项是将已检查的incomeTypes的解释更改为以下内容：

MyModel_IncomeTypeCheckBox

现在我还没有对此进行过测试，但它至少可以让你在那里大部分时间。如果您有任何问题，请告诉我。

Answer 2

我得到了它的工作。 @ jimmyym715的回答让我朝着正确的方向前进。给予他信任。

$(document).ready(function () {
    $("input[name$='MyModel.IncomeTypeCheckBox']").
            click(function () {
        var check_value = $(this).val();
        if (check_value == 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, #IncomeTypeCheckBox_
                SelfEmployed input").toggle(this.checked);
            $("#IncomeTypeCheckBox_SelfEmployed, #IncomeTypeCheckBox
                _SelfEmployed input").removeAttr("disabled");
        }
        else if (check_value != 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                    hide().attr("disabled", "disabled");
        }
 });
    $("#IncomeTypeCheckBox_SelfEmployed, 
        #IncomeTypeCheckBox_SelfEmployed input").hide().
            attr("disabled", "disabled");
});

需要一些调整，但几乎就在那里。

尝试基于单击复选框列表显示/隐藏输入

2 个答案: