单击复选框显示日期选择器答案

【问题标题】：To display a datepicker on click of checkbox单击复选框显示日期选择器
【发布时间】：2012-08-24 07:12:27
【问题描述】：

我有一张桌子
在表格中，第一列显示一个复选框，第二列显示一个文本框。
现在我想点击一个复选框，一个日期选择器应该在该特定行的文本框中启用。这应该发生在每行中的每个复选框的点击上。

这是我尝试过的方法：

//内部视图：

@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';           
    }
}

在这里，我尝试隐藏和显示标签，但是通过单击任何行中的复选框，日期选择器仅在第一行的文本框中启用。
请帮助我，我真的无法弄清楚这一点。

【问题讨论】：

标签： javascript ajax asp.net-mvc-3 asp.net-ajax

【解决方案1】：

@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';
}

类似的东西。我希望你明白了

【讨论】：

嘿，这是一个转折，我得到了数据选择器，我在文本框内单击，但我从中选择日期..它仅在第一行的文本框中更新...你能帮助 hw shal我解决了这个
你能举一些例子吗，就像我不知道你应该写 javascript 并调用它......
@Html.TextBox("Enddate", item.ExhibEndDate, new { id= Guid.NewGuid() })

【解决方案2】：

如果您可以为行添加容器 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，您将无法选择元素。所以添加你可以用来查询的类名。

【讨论】：