Javascript 根据复选框选择启用@Html.editorFor_Javascript_Jquery_Asp.net Mvc_Checkbox_Html Helper

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

javascript jquery asp.net-mvc checkbox

Javascript 根据复选框选择启用@Html.editorFor,javascript,jquery,asp.net-mvc,checkbox,html-helper,Javascript,Jquery,Asp.net Mvc,Checkbox,Html Helper,嗨，我对网页设计和语言（包括JavaScript）还是很陌生在强类型cshtml视图中，是否可以仅显示基于复选框的文本字段（其中文本字段和复选框都是强类型到模型的）？我创建了以下示例场景：示例类： namespace FruitSurveyNameSpace { public class FruitSurvey { public bool likesFruit { get; set; } public string fruitName { g

嗨，我对网页设计和语言（包括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")
}


@使用FruitSurveyNameSpace
@模型调查
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
喜欢水果吗？@Html.EditorFor（model=>model.likesFruit）
哪个水果：@Html.EditorFor（model=>model.fructname）
}
@节脚本{
@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助手结合使用呢

非常感谢。

对于验证，您需要一个

[RequiredIf]

属性。上面有很多例子，或者你可以看看

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

基于上面的html

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

这假设复选框最初处于选中状态，文本框最初可见。还要注意，这只会切换文本框。如果您有相关的标签和/或文本，其中所有元素都包装在一个容器中（例如

div

），那么您可能需要

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

因此，关联的元素也可以切换。

如果不使用javascript，则必须使用多步骤向导，用户必须选中复选框，然后发布表单以刷新页面并查看文本框。我仍在寻找如何将javascript与html.editorFor合并。或者我必须放弃html.editorFor吗？我看到了一个非常简单的输入标记和onclick属性。但似乎我无法将onclick属性添加到html.editorFor…我认为JavaScript将是更好的方法。但是有没有一种方法可以用html.editorFor来实现呢？请将生成的html添加到你的帖子中，我可以给你脚本来实现这一点（需要查看id、类名等），当然我可以做到，但与此同时，我想如果我们有cshtml文件，html文件将在运行时自动生成。因此，我们应该编辑html文件吗？不确定您的意思-我不想编辑该文件，只需查看生成的内容，以便在函数中使用正确的选择器切换文本框的可见性。我假设它是

和

，但由于您使用的是

EditorFor（）

而不是

CheckBoxFor（）

和

TextBoxFor（）

（建议您可能有一个自定义编辑器模板），所以我不能确定调查是否喜欢水果