使用復選框隱藏/顯示日期選擇器
[英]hide/show datepicker with checkbox
問題描述
我有一個復選框，像這樣：
<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();
}
});
但是日期選擇器不會被隱藏。
那么，我必須更改的是，日期選擇器將被隱藏嗎？
謝謝。
這是日期選擇器的模型：
<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>
2 個解決方案
解決方案1
1 已采納 2018-02-20 07:40:19
使用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 ki-calendar"></span></span></span>
解決方案2
0 2018-02-20 08:27:53
完美運作
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"; } }
<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>
show（）hide（）復選框：jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.