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");
            }
        }
 );

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

1 个答案: