Question

I have a table
In the table first column displays a checkbox and second has a textbox.
Now i want onclick of a checkbox a datepicker should be enabled in the textbox of that specific row. and this should happen onclick of every checkbox in each row.

Here is wat i have tried:

//Inside 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 Code:

function checkbox1() {

    if ($('.a').is(':checked')) {
        $(this).document.getElementById('edit1').style.display = 'block';
        $(this).document.getElementById('edit2').style.display = 'none';           
    }
}

Here i tried hiding and displaying tags but with this onclick of a checkbox in any row datepicker is enabled only in the textbox of first row.

Please help me i m really not able to figure this out.

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="[e-mail]">@Html.TextBox("Enddate", item.ExhibEndDate) </div>

JS:

function checkbox(index){
     $(this).document.getElementById('edit-' + index).style.display = 'none';
}

Something like this. I hope you’ve got the point