Javascript 根据选中的复选框编辑日期字段

我在页面上显示了多个列。我想添加复选框，以便可以根据选择编辑指定的行。但是有一个问题，因为我无法编辑选中的框

例如：

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

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>
     }   

@foreach（模型中的变量项）
{
@DisplayFor（x=>item.ID）
}   

---

任何帮助都将不胜感激

我无法测试，但我认为这与您的方法非常接近

同时使用前缀和复选框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");
            }
        }
 );

@foreach（模型中的变量项）
{
@DisplayFor（x=>item.ID）
}
$（“.id”）。在（'click'，函数（e）上{
var key=“#日期-”+e.target.id；
如果（$（key.attr（“已检查”）=“已检查”）{
$（key.removeAttr（“只读”，false）；
$（key.focus（）；
}否则{
$（key.attr（“只读”、“只读”）；
}
}
);

不要重复ID。使用一个类来代替您具有重复的

id

属性，这是无效的html。和

$（“#日期”）

选择id为

的第一个元素。使用类名和相对选择器（相对于封闭的父元素）引用example@StephenMuecke尝试过，但仍然遇到相同的问题。@caitlinp remove readonly=“readonly”。这将使您的文本框完全符合它所说的内容（在“不可编辑”中只读）。
 @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");
            }
        }
 );