根据复选框选择启用@Html.editorFor答案

【问题标题】：enable @Html.editorFor based on checkbox selection根据复选框选择启用@Html.editorFor
【发布时间】：2014-10-01 09:06:55
【问题描述】：

您好，我对网页设计和包括 JavaScript 在内的语言还是很陌生。

在强类型的 cshtml 视图中，是否可以仅显示基于复选框的文本字段（其中文本字段和复选框都是强类型的模型？）我在下面创建了一个示例场景：

示例类：

namespace FruitSurveyNameSpace
{
    public class FruitSurvey 
    {
        public bool likesFruit { get; set; }
        public string fruitName { get; set; }
    }
}

示例 cshtml：

<!DOCTYPE html>
@using FruitSurveyNameSpace
@model FruitSurvey
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <p>Like Fruit? @Html.EditorFor(model => model.likesFruit) </p>
        <p>Which Fruit: @Html.EditorFor(model => model.fruitName)</p>
    </fieldset>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

生成以下html

<form action="/" method="post">
  <input name="__RequestVerificationToken" type="hidden" value="blahValue" />
  <fieldset>
    <legend>Survey</legend>
    <p>likesFruit?
      <input class="check-box" data-val="true" data-val-required="The likesFruit field is required." id="likesFruit1" name="likesFruit1Name" type="checkbox" value="true" />
    </p>
    <p>fruitName
      <input class="text-box single-line" id="fruitName1" name="fruitName1Name" type="text" value="" />
    </p>
  </fieldset>
</form>

在上面的示例场景中，只有当用户选择他/她喜欢水果（动态）时，输入水果名称才有意义。否则，水果名称输入没有任何意义，不应显示。此外，我们可能会强制用户在他/她选择喜欢水果复选框后输入水果名称（目前我在非动态生成的字段中使用 [Required] 属性，并且不确定如果变为动态它是否仍然有效）。

我们可以看到，这两个值都是模型的强类型，这就是我使用 html 助手的原因。有没有办法在不使用 JavaScript 的情况下做到这一点？或者如果没有，我应该如何与 html 助手结合使用？

非常感谢。

【问题讨论】：

如果您不使用 javascript，则必须使用多步骤向导来完成，用户必须选择复选框，然后发布表单以刷新页面并查看文本框。
我仍在寻找如何将 JavaScript 与 html.editorFor 结合起来。还是我必须放弃 html.editorFor？我在看plus2net.com/javascript_tutorial/enable-disable.php，它看起来很简单，有一个常规的输入标签和一个 onclick 属性。但似乎我无法将 onclick 属性添加到 html.editorFor...

标签： javascript jquery asp.net-mvc checkbox html-helper

【解决方案1】：

对于验证，您需要一个[RequiredIf] 属性。 SO上有很多例子，或者你可以看看MVC Foolproof Nuget package

正如 Rowan 所指出的，如果不接受 javascript，则需要一个两步向导。如果您可以使用 javascript，那么只需根据复选框的选中状态切换文本框的可见性。

基于上面的html

$('#likesFruit1').click(function() {
  $('#fruitName1').toggle();
});

这假定复选框最初被选中，并且文本框最初是可见的。另请注意，这只会切换文本框。如果您有关联的标签和/或文本，其中所有元素都包装在一个容器中（比如div），那么您可能想要

$('#fruitName1').closest('div').toggle();

这样关联的元素也会被切换。

【讨论】：

我认为 JavaScript 会是更好的途径。但是有没有办法用 html.editorFor 做到这一点？
请将生成的 html 添加到您的帖子中，我可以为您提供执行此操作的脚本（需要查看 id、类名等）
当然我可以做到，但与此同时，我想如果我们有cshtml文件，html文件将在运行时自动生成。因此，我们应该编辑一个 html 文件吗？
不确定你的意思——我不想编辑文件，只是看看生成了什么，这样我就可以在函数中使用正确的选择器来切换文本框的可见性。我假设它是<input type="checkbox" id="likesFruit".../> 和<input type="text" id="fruitName".../>，但因为你使用EditorFor() 而不是CheckBoxFor() 和TextBoxFor()（建议你可能有一个自定义编辑器模板）我不能确定
调查
喜欢水果吗？