时间戳

首页 > 解决方案 > 单击复选框时没有显示日期选择器？

javascript - 单击复选框时没有显示日期选择器？

问题描述

我想通过选中复选框来单击，但是 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>

标签： javascripthtmljqueryasp.net-mvc

解决方案

  <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>

推荐阅读