单击复选框时没有显示日期选择器？答案

【问题标题】：Datepicker is not showing when clicking checkbox?单击复选框时没有显示日期选择器？
【发布时间】：2020-09-30 09:02:56
【问题描述】：

我想通过选中复选框单击，但 TextBox 没有显示我的日期选择器并且需要一些帮助，没有 javascript 错误。这可能是什么原因？下面是我的逻辑

$(document).ready(function() {

  // bind an event with checkbox on click. On click function onClickCheckBox will be called.
  $('#Lockuntil').on('click', onClickCheckBox); 

  // to hide or show on page load.c
  onClickCheckBox(); 
});

// logic to show hide textbox based on checkbox's value
function onClickCheckBox() {
  if ($('#Lockuntil').is(":checked")) {
    $("#TextValue").show();
  } else {
    $("#TextValue").hide();
  }
}

<div class="row">
  <div class="form-group">
    <div class="col-sm-2">
      @Html.CheckBoxFor(model => model.Lockuntil, new { @class = "rb", id = "Lockuntil" }) 
      @Html.TextBoxFor(model => model.TextValue, new { @class = "datepicker", id = "TextValue" })
    </div>
  </div>
</div>

【问题讨论】：

在这里回答了类似的问题：stackoverflow.com/questions/19670323/… 还检查了这个小提琴的工作演示：jsfiddle.net/NmByg 您还需要在文本框上初始化 datepicker，我没有看到任何初始化代码，您可能想要也检查一下：stackoverflow.com/questions/879703/…
您的代码看起来不错 - 您是否在页面加载后加载 row？尝试将$("#Lockuntil").on("click"... 更改为$(document).on("click", "#Lockuntil", onClickCheckBox) 以排除它。
在您的 doc.ready 中，添加 console.log($("[id=Lockuntil]").length, $("[id=TextValue]").length) - 这会给您带来什么？
@freedom console.log($("[id=Lockuntil]").length, $("[id=TextValue]").length)。消息 1 1
@freedom 我想通了，我错过了添加 Datepicker 字段。查看我添加的解决方案。

标签： javascript html jquery asp.net-mvc

【解决方案1】：

  <script type="text/javascript">

                    $(document).ready(function () {

                        $(document).on("click", "#Lockuntil", onClickCheckBox) // bind an event with checkbox on click. On click function onClickCheckBox will be called.

                        $('#TextValue').datepicker({
                            orientation: "bottom auto",
                            format: 'dd MM yyyy',
                            todayHighlight: true,
                            minDate: 0
                        }).on('changeDate', function (ev) {
                            $(this).datepicker('hide');
                        });

                        onClickCheckBox(); // to hide or show on page load.c
                    });

                    function onClickCheckBox() // logic to show hide textbox based on checkbox's value.
                    {
                        if ($('#Lockuntil').is(":checked")) {
                            $("#TextValue").show();
                        }
                        else {
                            $("#TextValue").hide();
                        }
                    }
                </script>

【讨论】：