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

【问题标题】：Editing a date field based on the checkbox being checked根据选中的复选框编辑日期字段
【发布时间】：2018-11-20 21:33:19
【问题描述】：

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

例如：

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

任何帮助将不胜感激！

【问题讨论】：

stackoverflow.com/questions/9454645/… 不要重复 ID。改用类
你有重复的id 属性，这是无效的 html。并且$("#date") 选择带有id 的第一个元素。使用类名和相对选择器（相对于封闭的父元素）
以How can i get h3 tag text value in jquery?为例
@StephenMuecke 试过了，但仍然停留在同一个问题上。
@caitlinp remove readonly="readonly"。这将使您的文本框与它所说的完全相同（只读为不可编辑）。w3schools.com/tags/att_input_readonly.asp

标签： javascript jquery html asp.net-mvc

【解决方案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");
            }
        }
 );

【讨论】：