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

Trying to show/hide input based on click in checkbox list

本文关键字：列表显示 隐藏 输入 复选框 单击      更新时间：2023-09-26

我有这个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基于与上述case值对应的enum。

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

我现在正在尝试使用相同的代码根据复选框列表选择显示/隐藏，但没有成功。我想隐藏<div>是出现而不是隐藏。我错过了什么，它不适用于复选框列表？如何使用复选框列表执行此操作(即，如果我单击"自雇"复选框，它将显示适当的<div>，当我取消选中"自雇"复选框时，它将隐藏<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>时禁用验证(并使用模组MicrosoftMvcValidation.js以及活页夹。

任何帮助，不胜感激。

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

在您

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

var incomeType = $("#MyModel_IncomeTypeCheckBox");

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

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

首先，由于MyModel_IncomeTypeCheckBox是一个名称，而不是一个ID，jQuery无法通过$('#MyModel_IncomeTypeCheckBox')访问该值

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

因此，这里有两种选择。

第一个选项是按其ID单独检查每个复选框的丑陋任务，但这不是您想要的，因为它既痛苦又低效。

第二种选择是将检查的收入类型的解释更改为如下所示：

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");
});

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

相关文章：