Редактирование поля даты на основе отмеченного флажка

Question

У меня есть несколько столбцов, которые отображаются на странице.Я хотел добавить флажки, чтобы указанную строку можно было редактировать в зависимости от выбора.Однако есть проблема, потому что я не могу редактировать поле, которое галочка .

Например:

box       | ID | Date
checked   | 1  | 11/20/18  <-- this should be editable
unchecked | 2  | 11/15/18  <-- this should just be displayed

JavaScript / Jquery:

  $(".id").on('click', function (e) {
        var key = "#date-" + e.target.id;
        var check = "#" + e.target.id;
                if ($(check).attr(':checked')) {
                    $(key).removeAttr("readonly", false);
                    $(key).focus();
                } else {
                    $(key).attr("readonly", "readonly");
                }
            });

HTML:

 @foreach (var item in Model)
    {
       <td><input class="id" type="checkbox" id=@item.ID/></td>
       <td>@Html.DisplayFor(x => item.ID)</td>
       <td><input id='@item.ID' type="text" value='@item.Date' readonly="readonly" /></td>
     }   

Любая помощь приветствуется!

Answer 1

Я не мог проверить, но, я думаю, это очень близкий ответ на ваш подход ...

, используя префикс и ID флажков вместе для идентификации,

 @foreach (var item in Model)
{
    <td><input class="id" type="checkbox" id='@item.ID' /></td>
    <td>@Html.DisplayFor(x => item.ID)</td>
    <td><input id='date-@item.ID' type="text" value='@item.Date' readonly="readonly" /></td>
}


 $(".id").on('click',function(e){
          var key= "#date-"+ e.target.id;
            if ($(key).attr("checked") == "checked") {
                $(key).removeAttr("readonly", false);
                $(key).focus();
            } else {
                $(key).attr("readonly", "readonly");
            }
        }
 );