Javascript 尝试根据“单击”复选框列表显示/隐藏输入

我有一个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>

但是如果

被隐藏，它将不允许我继续，因为它正在尝试验证。如果

是隐藏的，则另一个javascript不会验证它

javascript基于，对我来说工作得很好。它用于在

隐藏时禁用验证（并使用mod to

MicrosoftMvcValidation.js

以及活页夹）

感谢您的帮助

---

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

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

var incomeType = $("#MyModel_IncomeTypeCheckBox");

此时，我猜测

MyModel\u IncomeTypeCheckBox

是分配给所有incomeType复选框的名称

如果是这样的话，那么这可能解释了为什么会有问题

首先，因为

MyModel\u IncomeTypeCheckBox

是一个名称，而不是一个ID，jQuery无法通过

$（“#MyModel\u IncomeTypeCheckBox”）访问该值。

其次，即使jQuery可以访问正常表单提交中包含的内容，其余的代码也只能在选中单个框时才能工作，因为选中多个框会导致包含sele复选框值的逗号分隔字符串的

MyModel\u 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
}

---

现在我还没有测试过这个，但至少它应该能让你在大部分的过程中达到目的。如果你有任何问题，请告诉我。

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

---

需要一些调整，但几乎就要到了。

@gdoron试图提出一个更合适的问题。基本上，我发布的javascript没有根据复选框列表选择隐藏

。它根本没有隐藏。还更新了一点post。我怀疑有一种更优雅的方法来实现这一点，而不是攻击

MicrsofotMvcValidation.js

但我一直找不到它。我猜老地址是“如果它没有坏…”将适用。您是呈现一个复选框列表还是一堆单独的复选框？例如，每个复选框是否都有自己的id，同时与其他复选框共享相同的名称，使其成为一个复选框列表，如是？：，等等@jimmym715啊，是的，每个复选框在共享相同的名称时都有自己的id。如果是这样，我想这就是问题所在？我将再次检查tomorrow和report。谢谢。在复选框列表中，每个复选框都应该有自己的ID，同时与列表中的其他复选框共享其名称。不过请注意，如果您只希望选中一个复选框，因为这是您的意图，最好使用单选按钮列表，如“选择一个”是单选按钮列表中固有的，但必须在复选框列表中进行验证我不擅长javascript。我已使用您的第二个选项重新排列了我的代码，但它根本不起作用。我是否遗漏了什么？如果您注意到，我列出的最后一个代码块可以显示/隐藏

，但我提到它不会进行验证。验证基于在我列出的第一个代码块中的

禁用

和

启用

函数上。是否有任何方法修改最后一个块以利用

禁用

和/或

启用

（即，使用它们将允许验证工作）？因此，如果我理解正确，您正在尝试禁用id为的div中的表单元素=“incomeTypeStatusDiv”。是否只有一个具有此id的div？（另外，为什么要隐藏该复选框？如果该复选框被隐藏，人们将如何取消选中？）复选框列表总是出现。选择显示/隐藏

。如果选中

自营职业
复选框，则显示具有唯一ID的
——它有一个金额文本框。如果未选中或未选中，则该
将隐藏。该
的默认值将隐藏。第一个块带有
开关
语句的代码绑定到验证活页夹-
禁用
功能触发它（如果禁用，则不会进行验证，即
被隐藏）。如果您对以下几点感兴趣，这可能是一个新问题：
$(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");
});