使用复选框“启用”另一个复选框并显示隐藏的文本框

Question

我对编程很陌生，基本上是从 2 月开始尝试自学。我已经设法使用 Visual Studio/MVC5 创建了一个基本表单，但我在一些更复杂的功能上苦苦挣扎。

这里我有一个禁用的复选框 (id=withdrawn)，我希望在勾选“更新”(id=update) 复选框后启用它。我还希望仅在选中相同的“更新”复选框后才显示“参考编号”文本框。任何帮助将不胜感激。

@model F10New.ViewModels.NewSubmissionForm
@{
ViewBag.Title = "NewSubmission";
Layout = "~/Views/Shared/_Layout.cshtml";
}


@using (Html.BeginForm("Save", "Notifications"))

{

<p>*Is this the initial notification of the project p>

<div class="form-inline">
<div class="checkbox" id="initialNotification">
    <label>
        @Html.CheckBoxFor(m => m.Notification.Intial, new { @enabled   = "enabled" }) Initial notification        </label>
</div>    
<div class="checkbox" id="update">
    <label>
        @Html.CheckBoxFor(m => m.Notification.Update) Update to an existing notification
    </label>
</div>

    <div class="checkbox" id="withdrawn">                       
        <label>
            @Html.CheckBoxFor(m => m.Notification.Withdrawn, new { @disabled = "disabled" }) The project has been withdrawn
        </label>
    </div>    

<b>Details of the locations(s) of the site</b>

<div class="checkbox">
    <label>
        @Html.CheckBoxFor(m => m.Notification.MultiSite) Check this box if this project has multiple site locations
    </label>
</div>

<p>What is the exact address ?</p>

<div class="form-group">
    @Html.LabelFor(m => m.Notification.Address1)
    @Html.TextBoxFor(m => m.Notification.Address1, new { @class = "form-control", placeholder = "(eg building name, address, location, grid ref)" })
    @Html.ValidationMessageFor(m => m.Notification.Address1)

</div>

<div class="form-group">
    @Html.LabelFor(m => m.Notification.Address2)
    @Html.TextBoxFor(m => m.Notification.Address2, new { @class = "form-control", placeholder = "(eg street number, street name)" })
    @Html.ValidationMessageFor(m => m.Notification.Address2)

</div>
<div class="form-group">
    @Html.LabelFor(m => m.Notification.Address3)
    @Html.TextBoxFor(m => m.Notification.Address3, new { @class = "form-control", placeholder = "(eg district)" })

</div>
<div class="form-group">
    @Html.LabelFor(m => m.Notification.Town)
    @Html.TextBoxFor(m => m.Notification.Town, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Notification.Town)

</div>
<div class="form-group">
    @Html.LabelFor(m => m.Notification.County)
    @Html.TextBoxFor(m => m.Notification.County, new { @class = "form-control" })

</div>
<div class="form-inline">
    <div class="form-group" id="postCodeField">
        @Html.LabelFor(m => m.Notification.PostCode)
        @Html.TextBoxFor(m => m.Notification.PostCode, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Notification.PostCode)

    </div>

    <button type="submit" class="btn btn-primary" id="addressSearch">Search for Address</button>
    </div>

    <div class="form-inline">
        <div class="form-group" id="submissionDropdown">

            @Html.LabelFor(m => m.Notification.CountryId)
            @Html.DropDownListFor(m => m.Notification.CountryId, new SelectList(Model.Countries, "Id", "Name"), "Please choose one", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Notification.CountryId)
        </div>


        <div class="form-group" id="submissionDropdown">


            @Html.LabelFor(m => m.Notification.AreaId)
            @Html.DropDownListFor(m => m.Notification.AreaId, new SelectList(Model.Areas, "Id", "Name"), "Select Country first", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Notification.AreaId)

        </div>
        <div class="form-group" id="submissionDropdown">


            @Html.LabelFor(m => m.Notification.LocalId)
            @Html.DropDownListFor(m => m.Notification.LocalId, new SelectList(Model.Locals, "Id", "Name"), "Select a Geographical Area first", new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Notification.LocalId)

        </div>
    </div>


    @Html.HiddenFor(m => m.Notification.Id)
    @Html.AntiForgeryToken();

    <button type="submit" class="btn btn-primary" id="pageOneSubmit">Submit</button>
}
@section scripts
{
<script>
$(document).ready(function(){
 $("#Notification_Update").on('change', function(){
     $("#Notification_Withdrawn").removeAttr("disabled");       
      $("#Notification_Initial").removeAttr("enabled");
  });
})
</script>


}

Answer 1

然后包含 jquery

<script>
  $(document).ready(function(){
     $("#Notification_Update").on('change', function(){
         $("#Notification_Withdrawn").removeAttr("disabled");
         $("#my_hidden_input_id").show();

      });
  });
</script>

更新

使用 HTML 帮助器将自定义 ID 添加到 HTML 控件。

@Html.CheckBoxFor(m => m.Notification.Withdrawn, 
   new { @disabled = "disabled", @id="Withdrawn" }) 

@Html.CheckBoxFor(m => m.Notification.Update, 
   new { @id="Update" })