Question

我用ASP.NET MVC创建了一个Web表单。

我已成功设置查看以添加复选框，该复选框根据其点击值显示div。这是正常运行的Javascript：

$('div.schedule .input_control').click(function () {
  var $target = $(this).closest('div').find('.showSchedule');
   if (this.checked) {
      $target.show();

   } else {
      if (confirm("Are you sure you want to exclude this schedule?") == true) {
        $target.hide();
        $(':hidden').not("input[name=__RequestVerificationToken]").val('');
      } else {
        $(this).prop("checked", true);
      }
   }
});

以下是包含要隐藏和显示的复选框和div的HTML代码段：

<div class="schedule">
   @Html.CheckBox("schedule", false, new { @class = "input_control" })
   <div style="display: none" class="showSchedule">
      //form fields
   </div>
</div>

勾选复选框并通过单击取消勾选时，div会成功显示和隐藏。确认消息也按预期工作。

但是当验证错误和表单页面再次加载时 div隐藏，而复选框勾选！

如何确保div始终基于复选框的值显示？这很重要，因为当项目被编辑时，表格加载时勾选复选框但隐藏了div。

我意识到这是因为默认情况下，我的div样式设置为“display：none”。

那么更好的方法是什么？

Answer 1

添加一个功能，检查复选框是否已选中，如果已选中，则显示div，否则隐藏div

$(document).ready(function () {
    var $input = $('div.schedule .input_control:checked');
    var $target = $input.closest('div').find('.showSchedule');
    $target.show();
});

使用Javascript和样式显示属性显示基于复选框值的div

1 个答案: