Jquery逻辑工作3/4（复选框列表） – 如何使其工作100％

我有一个复选框列表，每个复选框都有自己的唯一ID附加到复选框的名称。 我所追求的行为是，如果选中一个复选框（此处：“SelfEmployed”），则会显示隐藏的

。 如果未选中，则隐藏

。 默认设置是隐藏

。

内部是其他输入，在本例中是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"部分很重要，可作为任何输入的属性添加/删除。 我正在使用validation绑定器，它基本上不允许隐藏的

任何输入抛出validation错误（显然，当显示带有输入的

，该属性被删除，任何validation错误将工作）。

在页面上，我有复选框列表和一个文本框输入。 两者都是必需的（该复选框使用自定义[Mandatory]数据注释属性）。 还有隐藏的

和另一个文本框输入。 这些是场景（4个中有3个工作）：

1. 页面加载。 未检查“SelfEmployed”。 如果在复选框中未选择任何内容和/或第一个文本框为空，则点击“提交”将激活validation。 隐藏的
   不会触发validation，因为其中的将其属性设置为disabled="disabled" 。 预期的行为 – 通过。
2. 页面加载。 选中复选框中“SelfEmployed”以外的任何内容并在文本框中输入内容将允许提交页面。 隐藏的
   不会触发validation，因为其中的将其属性设置为disabled="disabled" 。 预期的行为 – 通过。
3. 页面加载。 在复选框中选择“SelfEmployed”会显示先前隐藏的
   和第二个文本框。 由于复选框已检查某些内容，并且在现在显示的

   的第一个文本框和第二个文本框中都输入了某些内容（即，从第二个删除了disabled="disabled"属性），然后页面将提交。 预期的行为 – 通过。
4. 页面加载。 与＃3相同，除非这次，如果你没有在
   填写第二个文本框并尝试提交validation错误，则会在第二个文本框上抛出（预期）。 如果你填写第二个文本框并提交它可以正常工作（预期）。 但是，如果仍然出现validation错误，并且您取消选中“SelfEmployed”复选框（导致

   再次隐藏 – 这是预期的），然后尝试提交页面（validation传递复选框和第一个文本框），它不会提交。 失败。

检查HTML源代码表明，在上面的场景＃4（隐藏

）中取消选中“SelfEmployed”复选框时，不会重新插入disabled="disabled"属性。 仅当显示

容器时在第二个文本框上抛出validation错误，然后再次隐藏它并尝试提交时，才会发生这种情况。 请注意，如果我只是选中/取消选中“SelfEmployed”复选框而不尝试提交（并触发任何validation），您会在Chrome的开发工具中看到已将disabled="disabled"分别添加到标记中。

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

Answer 1

这对我有用：

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