单击复选框时显示日期选择器
To display a datepicker on click of checkbox
我有一个表
在表中,第一列显示复选框,第二列显示文本框
现在我想要点击一个复选框,在该特定行的文本框中启用日期选择器。这应该发生在每行中的每个复选框上。
这是我试过的水:
//内部视图:
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 }))
{
<div class="cell"> <input type="checkbox" name="chkbox" class="a" onclick="checkbox1()" data-id="@item.ID" />
</div>
<div class="cell" id="edit2">@Html.DisplayFor(modelItem => item.ExhibEndDate)</div>
<div class="cell" id="edit1">@Html.TextBox("Enddate", item.ExhibEndDate) </div>
//Javascript代码:
function checkbox1() {
if ($('.a').is(':checked')) {
$(this).document.getElementById('edit1').style.display = 'block';
$(this).document.getElementById('edit2').style.display = 'none';
}
}
在这里,我尝试隐藏和显示标签,但通过在任何行中单击复选框,日期选择器只在第一行的文本框中启用。
请帮帮我,我真的想不通。
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 }))
{
<div class="cell"> <input type="checkbox" onclick="checkbox(@item.Index)" />
</div>
<div class="cell" id="edit-@item.Index">@Html.TextBox("Enddate", item.ExhibEndDate) </div>
JS:
function checkbox(index){
$(this).document.getElementById('edit-' + index).style.display = 'none';
}
像这样的东西。我希望你已经明白了
如果可以为类似的行添加容器div
<div class="row">
<div class="cell"> <input type="checkbox" name="chkbox" class="a" onclick="checkbox1(this)" data-id="@item.ID" />
</div>
<div class="cell datePicker" id="edit2">@Html.DisplayFor(modelItem => item.ExhibEndDate)</div>
<div class="cell dateTxt" id="edit1">@Html.TextBox("Enddate", item.ExhibEndDate) </div>
</div>
然后在jquery中,您可以编写
function checkbox1(chkBox)
{
$('.datePicker').hide();
$('.dateTxt').show();
if ($(chkBox).is(':checked')) {
$(chkBox).parents('.row').children('.datePicker').show();
$(chkBox).parents('.row').children('.dateTxt').hide();
}
}
这应该很有魅力。如果您有相同的id,您将无法选择元素。所以添加可以用来查询的类名。
相关文章:
- jquery日期选择器年份范围默认值
- jquery日期选择器失去了交互性
- 正在搜索JavaScript日期选择器滑块
- 如何在多个jQueryUI日期选择器中屏蔽特定日期
- jquery日期选择器显示与值不同的文本
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- Angular UI启动日期选择器问题
- 奇怪的日期选择器行为,与模糊有关
- 我希望这个日期选择器可以从1990年到2000年之间的年份中选择日期
- keith wood日期选择器日期格式和语言
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Jquery UI日期选择器不关注输入
- Javascript两个日期选择器冲突
- 动态添加的标记不会'无法正确使用日期选择器
- 日期选择器无法使用javascript显示
- AngularJS自定义日期选择器指令
- 他们网站上的代码出现启动日期选择器错误
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 更改日期选择器格式
- 带有推特助推器的日期选择器出现了,但没有't更改日期