0

我有一个复选框列表，每个复选框都有自己的唯一 ID 附加到复选框的名称。我所追求的行为是，如果选中一个复选框（此处：“SelfEmployed”），则<div>显示隐藏。如果未选中，<div>则隐藏。默认是<div>隐藏的。里面<div>是其他输入，在这种情况下是 a textbox。

我使用的代码 4 次中有 3 次有效，我将在下面解释。

这是我的 MVC 视图顶部的 jquery 代码：

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

（注意：我硬退回该行 - 不喜欢 SO 不会自动换行代码然后导致滚动条的方式）

该"disabled"部分很重要，并作为任何输入的属性添加/删除。我正在使用一个验证绑定器，它基本上不允许隐藏内的任何输入<div>引发验证错误（显然，当<div>显示输入时，该属性将被删除并且任何验证错误都将起作用）。

在一个页面上，我有复选框列表和一个文本框输入。两者都是必需的（复选框使用自定义[Mandatory]数据注释属性）。还有<div>另一个文本框输入的隐藏。这些是场景（其中 4 个中有 3 个有效）：

  1. 页面加载。未选中“SelfEmployed”。如果复选框中未选择任何内容和/或第一个文本框为空，则点击“提交”将触发验证。hidden<div>不会触发验证，因为 inside<input>的属性设置为disabled="disabled". 预期行为 - 通过。
  2. 页面加载。在复选框中选择“SelfEmployed”以外的任何内容并在文本框中输入内容将允许页面提交。hidden<div>不会触发验证，因为 inside<input>的属性设置为disabled="disabled". 预期行为 - 通过。
  3. 页面加载。在复选框中选择“SelfEmployed”会显示先前隐藏<div>的第二个文本框。由于复选框已选中某些内容，并且如果在<div>现在显示的第一个文本框和第二个文本框中都输入了某些内容（即，disabled="disabled"从第二个中删除了该属性<input>），则页面将提交。预期行为 - 通过。
  4. 页面加载。与 # 3 相同，除了这次，如果您没有在第二个文本框中填写<div>并尝试提交验证错误，则会在第二个文本框上引发验证错误（预期）。如果您填写第二个文本框并提交它工作的页面（预期）。但是，如果仍然出现验证错误并且您取消选中“SelfEmployed”复选框（导致<div>再次隐藏 - 这是预期的），然后尝试提交页面（验证通过复选框和第一个文本框），它将不会提交. 失败。

对 HTML 源代码的检查表明，disabled="disabled"当在上面的场景 #4 中取消选中“SelfEmployed”复选框时（隐藏了<div>），该属性没有被重新插入。仅当显示<div>容器时在第二个文本框上引发验证错误然后您再次隐藏它并尝试提交时，才会发生这种情况。请注意，如果我只是选中/取消选中“SelfEmployed”复选框而不尝试提交（并触发任何验证），您会在 Chrome 的开发工具中看到disabled="disabled"分别添加和删除<input>标签。

我该如何解决最后一个问题？谢谢。

4

1 回答 1

0

这对我有用：

$(document).ready(function () 
    {
        $("input[name$='StepIncomeInformation.IndividualIncomeTypeCheckBox']").click(function () {
            if ($('#StepIncomeInformation_IndividualIncomeTypeCheckBox_SelfEmployed').is(':checked')) {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').show().removeAttr("disabled");
            }
            else {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').hide().attr("disabled", "disabled");
            }
        });
        $("#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input").hide().attr("disabled", "disabled");
    });
于 2012-05-03T04:02:54.590 回答