Question

我有一个复选框，如下所示：

<div>
     <input class="k-checkbox" id="showEindDatum" type="checkbox">
     <label class="k-checkbox-label" for="showEindDatum">Deze wijziging is van tijdelijke aard</label>
</div>

和一个日期选择器，如下所示：

 <span class="k-picker-wrap k-state-default">
    <input id="EindDatum" name="EindDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="EindDatum_dateview" aria-disabled="false" style="width: 90%;">
    <span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview">
        <span class="k-icon k-i-calendar">
        </span>
    </span>
</span>

和另一个，像这样：

 <span class="k-picker-wrap k-state-default">
    <input id="IngangsDatum" name="IngangsDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="IngangsDatum_dateview" aria-disabled="false" style="width: 90%;">
    <span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview">
        <span class="k-icon k-i-calendar">
        </span>
    </span>
</span>

所以现在我想在选中复选框时隐藏其中一个日期选择器。我像Jquery一样尝试这个：

$("#showEindDatum").click(function () {
        if ($(this).prop('checked') == true) {
             $("#EindDatum").show();
        } else {
             $("#EindDatum").hide();
        }
    });

但是日期选择器不会被隐藏。

那么我必须改变哪个日期选择器会被隐藏？

谢谢。

这是datepicker的模型：

<div class="col-md-6">
                                    <div class="form-horizontal">
                                        @FormGroupHelper.CreateFormGroup(Html, m => m.IngangsDatum, Html.Kendo().DatePickerFor(m => m.IngangsDatum).Min("01-01-2009").Max(new DateTime(DateTime.Today.Year + 1, 12, 31)).Format("dd-MM-yyyy").ParseFormats(new string[] { "ddMMyyyy" }).Events(e => e.Change("OnIngangsDatumChanged")))
                                        @FormGroupHelper.CreateFormGroup(Html, m => m.EindDatum, Html.Kendo().DatePickerFor(m => m.EindDatum).Min(Model.EindDatum.HasValue ? Model.EindDatum.Value : DateTime.Today).Format("dd-MM-yyyy").ParseFormats(new string[] { "ddMMyyyy" }).Events(e => e.Change("OnIngangsDatumChanged")))
                                    </div>
                                </div>

Answer 1

使用jquerys切换是一种方法。不确定你想要隐藏哪个元素，但这是一般的想法。

$("#showEindDatum").click(function () {
            $(".k-picker-wrap").toggle();
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div>
                                    <input class="k-checkbox" id="showEindDatum" type="checkbox">
                                    <label class="k-checkbox-label" for="showEindDatum">Deze wijziging is van tijdelijke aard</label>
                                </div>
                                
                                <span class="k-picker-wrap k-state-default"><input id="EindDatum" name="EindDatum" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="EindDatum_dateview" aria-disabled="false" style="width: 90%;"><span unselectable="on" class="k-select" aria-label="select" role="button" aria-controls="IngangsDatum_dateview"><span class="k-icon k-i-calendar"></span></span></span>

Answer 2

完美无缺

＆＃13;

document.getElementById("box").style.display="none";
function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("box");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

＆＃13;

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
<p>click:<input type="checkbox" id="myCheck"  onclick="myFunction()">
<span id='box'>Date: <input type="text" id="datepicker"></span></p>
 
 
</body>
</html>

＆＃13;

使用复选框隐藏/显示datepicker

2 个答案: