Razor 复选框更改文本字段和下拉菜单的可见性

Question

简单的一个！

我目前正在创建一个巨大的成本核算网络应用程序，它包含一个带有大量字段的巨大输入表单，但我只想要我的复选框

Standard: @Html.CheckBox("Standard", false)

单击时更改

的可见性

我的文本字段

输入id="KID"类型="text"值=@ViewBag.kammid名称="kammid"/>
& #2 我的下拉列表

@Html.DropDownList("selectedFacing", (SelectList)ViewBag.FacingSheets)

我检查了很多论坛，但似乎没有任何效果，我想我需要使用 Jquery，但是当我将代码放在视图底部时它什么也没做。

<script type="text/javascript">
  $(function () {
    $("#Standard").click(function () {
      var checked = $(this).attr("checked");
      if (checked) {
        $("kammid").show();
        $("kammod").hide();
        @ViewBag.test = poo;
      } else {
        $("kammod").hide();
        $("kammid").show();
        @ViewBag.test = wee;
      }
    });
  });
</script>

已编辑脚本（同样无效）

<script type="text/javascript">
  $(function () {
    $("#Standard").click(function () {
      var checked = $(this).attr("checked");
      if ($(this).is(':checked')) {
        $("#KID").show();
        $("#KOD").hide();
      } else {
        $("#KOD").hide();
        $("#KID").show();  
      }
    });
  });
</script>

全视图代码是

@model IEnumerable<WebApplication4.Models.CoreSheets>
....
@using (Html.BeginForm("Iflexcst", "Costing", FormMethod.Post))
{
  <form>
    <h2>Enter Dimensions:</h2>
    Standard: @Html.CheckBox("Standard", false)
    <br>
    Special: @Html.CheckBox("Special", false)
    <br>
    Kamm ID:<br>
    <input class="foo" id="KID" type="text" value=@ViewBag.kammid name="kammid" />
    <br> Kamm OD: <br>
    <input id="KOD" type="text" value=@ViewBag.kammod name="kammod" />
    <br>
    Spacer ID:<br>
    <input type="text" name="SpacerInnerDim" value=@ViewBag.spacerid>
    <br>
    Spacer/Facing OD:<br>
    <input type="text" name="SpacerOuterDim" value=@ViewBag.spacerod>
    <br>
    Washers OD:<br>
    <input type="text" name="WashOuterDim" value=@ViewBag.washod>
    <br>
    Isolating Washer ID:<br>
    <input type="text" name="IsoWashInnerDim" value=@ViewBag.isoid>
    <br>
    Steel Washer ID:<br>
    <input type="text" name="SteelWashInnerDim" value=@ViewBag.steelid>
    <br>
    <h2>Enter Materials:</h2>
    <br>
    Kamm Core:<br>
    @Html.DropDownList("selectedCore", (SelectList)ViewBag.CoreSheets)
    <br>
    Spacer Core:<br>
    @Html.DropDownList("selectedSpacer", (SelectList)ViewBag.SpacerSheets)
    <br>
    Kamm and Space Facing:<br>
    @Html.DropDownList("selectedFacing", (SelectList)ViewBag.FacingSheets)
    <br>
    Steel Washer Core:<br>
    @Html.DropDownList("selectedSteelCre", (SelectList)ViewBag.CoreSheets)
    <br>
    Isolating Washer Core:<br>
    Special: @Html.CheckBox("Bought in ISO washers?", false)
    @Html.DropDownList("selectedIsoCre", (SelectList)ViewBag.CoreSheets)
    <br>
    Isolating Washer Facing:<br>
    @Html.DropDownList("selectedIsoFacing", (SelectList)ViewBag.FacingSheets)
    <br>
    <h2>Washer and Sleeve Quantity and Prices:</h2>
    <br>
    Steel Washer Quantity:<br>
    <input type="text" name="SteelWashQuan" value=@ViewBag.steelq>
    <br>
    <br>
    Isolating Washer Quantity:<br>
    <input type="text" name="IsoWashQuan" value=@ViewBag.isoq>
    <br>
    <br>
    Sleeve Quantity:<br>
    <input type="text" name="SleeveQuan" value=@ViewBag.sleeveq>
    <br>
    <br>
    Sleeve Price:<br>
    <input type="text" name="SleevePrice" value=@ViewBag.sleevepr>
    <br>
    <br>
    Isolating Washer Price:<br>
    <input type="text" name="IsoPrice" value=@ViewBag.isopr>
    <br>                                      
    <br> Cost: <br>
    <input id="Text3" type="number" value=@ViewBag.result />
    <input type="submit" value="Submit" />
  </form>
}


<script type="text/javascript">
    $(function () {

        $("#Standard").change(function () {
            if ($(this).is(":checked")) {
                $(".foo").show();
            }
            else {
                $(".foo").hide();
            }
        });

    })
            </script>

这里

输入维度：

Standard: @Html.CheckBox("Standard", false)

<br>
Special: @Html.CheckBox("Special", false)
<br>




Kamm ID:<br>
<input class="foo" id="KID" type="text" value=@ViewBag.kammid name="kammid" />
<br> Kamm OD: <br>
<input class="foo" id="KOD" type="text" value=@ViewBag.kammod name="kammod" />

<br>

<script type="text/javascript">
    $(function () {

        $("#Standard").change(function () {
            if ($(this).is(":checked")) {
                $(".foo").show();
            }
            else {
                $(".foo").hide();
            }
        });

    })
            </script>

编辑 50 亿

    @model IEnumerable<WebApplication4.Models.CoreSheets>

@{
    ViewBag.Title = "Iflexcst";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



@using (Html.BeginForm("Iflexcst", "Costing", FormMethod.Post))
{


        <h2>Enter Dimensions:</h2>

    <h5>
        Standard:
    </h5> @Html.CheckBox("Standard", false);

        <br>
        <h5>
            Special:
        </h5> @Html.CheckBox("Special", false);
            <br>




            <h5> ID:</h5> <br>
            <input class="foo" id="KID" type="text" value=@ViewBag.kammid name="kammid" />
            <br><h5>Kamm OD: </h5>  <br>
            <input class="foo" id="KOD" type="text" value=@ViewBag.kammod name="kammod" />

            <br>

            <h5> Spacer ID</h5><br>
            <input type="text" name="SpacerInnerDim" value=@ViewBag.spacerid>
            <br>
            <h5> Spacer/Facing OD:</h5> <br>
            <input type="text" name="SpacerOuterDim" value=@ViewBag.spacerod>
            <br>
            <h5>Washers OD: </h5>  <br>
            <input type="text" name="WashOuterDim" value=@ViewBag.washod>
            <br>
            <h5>Isolating Washer ID: </h5>  <br>
            <input type="text" name="IsoWashInnerDim" value=@ViewBag.isoid>
            <br>
            <h5>  Steel Washer ID:</h5> <br>
            <input type="text" name="SteelWashInnerDim" value=@ViewBag.steelid>
            <br>

            <h2>Enter Materials:</h2>
            <br>
            <h5> Kamm Core: </h5>  <br>
            @Html.DropDownList("selectedCore", (SelectList)ViewBag.CoreSheets);
            <br>
            <h5> Spacer Core:</h5>   <br>
            @Html.DropDownList("selectedSpacer", (SelectList)ViewBag.SpacerSheets);
            <br>
            <h5> Kamm and Space Facing: </h5>   <br>
            @Html.DropDownList("selectedFacing", (SelectList)ViewBag.FacingSheets);
            <br>
            <h5>Steel Washer Core: </h5>     <br>
            @Html.DropDownList("selectedSteelCre", (SelectList)ViewBag.CoreSheets);
            <br>
            <h5> Isolating Washer Core: </h5>  <br>
            <h5> Special:</h5>     @Html.CheckBox("Bought in ISO washers?", false);
            @Html.DropDownList("selectedIsoCre", (SelectList)ViewBag.CoreSheets);
            <br>
            <h5>Isolating Washer Facing: </h5>   <br>
            @Html.DropDownList("selectedIsoFacing", (SelectList)ViewBag.FacingSheets);
            <br>
            <h2>Washer and Sleeve Quantity and Prices:</h2>

            <br>
            <h5>  Steel Washer Quantity:</h5>  <br>
            <input type="text" name="SteelWashQuan" value=@ViewBag.steelq>
            <br>
            <br>
            <h5>  Isolating Washer Quantity:</h5>    <br>
            <input type="text" name="IsoWashQuan" value=@ViewBag.isoq>
            <br>

            <br>
            <h5> Sleeve Quantity:</h5>   <br>
            <input type="text" name="SleeveQuan" value=@ViewBag.sleeveq>
            <br>

            <br>
            <h5>  Sleeve Price:</h5>   <br>
            <input type="text" name="SleevePrice" value=@ViewBag.sleevepr>
            <br>

            <br>
            <h5> Isolating Washer Price: </h5>    <br>
            <input type="text" name="IsoPrice" value=@ViewBag.isopr>
            <br>

            <br><h5>
    Cost:
</h5> <br>
    <input id="Text3" type="number" value=@ViewBag.result />


    <input type="submit" value="Submit" />


    }

    <br><br><br><br>

    <h2>Bom Breakdown:</h2>
    <table class="table">


        <tr>
            <th>Component</th>
            <th>Quantity</th>
            <th>Cost</th>
        </tr>
        <tr>
            <td>@ViewBag.KammCore</td>
            <td>@ViewBag.KammBom</td>
            <td>@ViewBag.KammPrice</td>
        </tr>

        <tr>
            <td>@ViewBag.FaceCore</td>
            <td>@ViewBag.FaceBom</td>
            <td>@ViewBag.FacePrice</td>

        </tr>

        <tr>
            <td>@ViewBag.SpacerCore</td>
            <td>@ViewBag.SpacerBom</td>
            <td>@ViewBag.SpacerPrice</td>

        </tr>

        <tr>
            <td>@ViewBag.SteelWashCore</td>
            <td>@ViewBag.SteelWashBom</td>
            <td>@ViewBag.SteelWashPrice</td>

        </tr>

        <tr>
            <td>@ViewBag.IsoWashCore</td>
            <td>@ViewBag.IsoWashBom</td>
            <td>@ViewBag.IsoWashPrice</td>

        </tr>

        <tr>
            <td>@ViewBag.IsoWashFace</td>
            <td>@ViewBag.FaceIsoBom</td>
            <td>@ViewBag.FaceIsoPrice</td>

        </tr>



    </table>

    <script type="text/javascript">
        $(function () {

            $("#Standard").change(function () {
                if ($("#Standard").is(":checked")) {
                    $(".foo").show();
                    $('#KID').show();
                }
                else {
                    $(".foo").hide();
                    $('#KID').hide();
                }
            });

        })
    </script>

Answer 1

您的问题似乎是 jquery 中的 if else 子句在做同样的事情。

 if ($(this).is(':checked')) {
    $("#KID").show();
    $("#KOD").hide();
  } else {
    $("#KOD").hide();
    $("#KID").show();  
  }

请注意，您在 if 和 else 中显示了 #KID，同时也在两者中隐藏了 #KOD。只需更正此错误即可。

  if ($(this).is(':checked')) {
    $("#KOD").show();
    $("#KID").hide();
  } else {
    $("#KOD").hide();
    $("#KID").show();  
  }

JSFiddle

您可能想对标签（正确的方式）或在您的情况下对 h5 执行相同的操作，这样您就不会在没有输入的情况下在页面上显示文本。查看上面的 fiddle 示例。

Razor 复选框更改文本字段和下拉菜单的可见性

Razor Checkbox change visibility of text fields & dropdowns

asp.net

asp.net-mvc

jquery

razor

asp.net-mvc-4

输入维度：