在jquery中单击按钮时从多个字段中删除readonly属性

Question

我有一张桌子上有学生的详细信息.这些字段是只读字段,可以在单击编辑按钮时进行编辑.但是我在单击编辑按钮时一次选择该行的所有输入字段时遇到问题.

这是我的HTML代码

<table class="table table-bordered table-striped">
          <thead>
            <tr>
              <th>Checklist</th>
              <th>Id</th>
              <th>Student Name</th>
              <th>Address</th>
              <th>Phone</th>
              <th>Class</th>
              <th colspan="2">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <input type="checkbox" id="editCheck" class="btn1" />
                <input type="checkbox" id="deleteCheck" />
              </td>
              <td>1</td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td>12</td>
              <td><button type="button" class="btn btn-info btn-xs" id="btn1">Edit</button></td>
              <td><button type="button" class="btn btn-danger btn-xs" id="dbtn1">Delete</button></td>
            </tr>
            <tr>
              <td>
                <input type="checkbox" id="editCheck" class="btn2" />
                <input type="checkbox" id="deleteCheck" />
              </td>
              <td>1</td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td><input type="text" class="form-control item" readonly="readonly" /></td>
              <td>12</td>
              <td><button type="button" class="btn btn-info btn-xs" id="btn2">Edit</button></td>
              <td><button type="button" class="btn btn-danger btn-xs" id="dbtn2">Delete</button></td>
            </tr>
          </tbody>
        </table>

这是jquery.我按下编辑按钮选中了复选框.

   $(document).ready(function(){
     $('.btn.btn-info.btn-xs').click(function(){

        var newClass = $(this).attr('id');

        $('.'+newClass).prop('checked','true');
     });
   });
</script>

Answer 1

您只需将其添加到click处理程序中即可

$(this).closest('tr').find('input').removeAttr('readonly');

查找tr包含单击按钮的内容,找到其所有input元素,并删除其readonly属性.

实例:http://jsfiddle.net/zxsq0m5n/

顺便说一句,您可以使用相同的技巧来定位您checkbox,无需使用id/class将其与编辑按钮绑定在一起

$('.btn.btn-info.btn-xs').click(function(){

    var $tr = $(this).closest('tr')        
    $tr.find('input:checkbox').first().prop('checked','true');
    $tr.find('input').removeAttr('readonly');
});

实例:http://jsfiddle.net/zxsq0m5n/1/