javascript - 单击复选框显示日期选择器

Question

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

这是我试过的:

//内部 View :

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

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

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

是这样的。我希望你明白了这一点