0

I want to click by checking checkbox, but the TextBox is not showing my datepicker and need some help, there are not javascript error. What could be the reason for this? Here is my logic below

$(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>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
BraGcobs
  • 43
  • 1
  • 7
  • 1
    Similar question answered here : https://stackoverflow.com/questions/19670323/jquery-show-textbox-when-checkbox-checked also check this fiddle for working demo: http://jsfiddle.net/NmByg/ You also need to initialize datepicker on textbox, I don't see any code for initialization, you may want to check this also : https://stackoverflow.com/questions/879703/how-do-i-initialize-a-jquery-ui-datepicker-to-a-date-from-the-querystring – Vikas Lalwani Sep 30 '20 at 09:12
  • Your code looks ok - are you loading the `row` after the page has loaded? Try changing `$("#Lockuntil").on("click"...` to `$(document).on("click", "#Lockuntil", onClickCheckBox)` to rule it out. – freedomn-m Sep 30 '20 at 09:16
  • In your doc.ready, add `console.log($("[id=Lockuntil]").length, $("[id=TextValue]").length)` - what does that give you? – freedomn-m Sep 30 '20 at 09:18
  • @freedom console.log($("[id=Lockuntil]").length, $("[id=TextValue]").length). message 1 1 – BraGcobs Sep 30 '20 at 09:45
  • 1
    @freedom i figured it out, i was missing to add Datepicker fields. see my solution added. – BraGcobs Sep 30 '20 at 10:29
  • lulz - didn't even notice it was the datepicker not showing - thought it was just the textbox not showing .. "*but the TextBox is not showing*" – freedomn-m Sep 30 '20 at 12:08
  • @freedom i guess had to redo the code and see its working. thanks – BraGcobs Sep 30 '20 at 12:18

1 Answers1

0
  <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>
BraGcobs
  • 43
  • 1
  • 7