0

我有这个 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活页夹。

任何帮助表示赞赏。

请参阅下面的最终结果（基于答案）

4

2 回答 2

0

我让它工作了。@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");
});

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

于 2012-05-01T17:58:55.690 回答
0

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

var incomeType = $("#MyModel_IncomeTypeCheckBox");

在这一点上，我猜这MyModel_IncomeTypeCheckBox是分配给所有incomeType 复选框的名称。

如果是这样，那么这很可能解释了为什么会出现问题。

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

其次，即使 jQuery 可以访问MyModel_IncomeTypeCheckBox普通表单提交中包含的内容，其余代码也只能在选中单个框时起作用，因为选中多个框将导致MyModel_IncomeTypeCheckBox包含逗号分隔的复选框值字符串选中的复选框。

所以，这里有两个选择。

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

第二个选项是将检查的incomeTypes 的解释更改为如下所示：

function setControls() {
    $('input:checked[name="MyModel_IncomeTypeCheckBox"]:checked').each(function () {
        var checkedIncomeType = $(this).val();
        handleShowHide(checkedIncomeType);
    });
}

function handleShowHide(incomeType)
{
    // move the switch statement here
}

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

于 2012-04-30T14:35:41.590 回答