remove readonly attribute from multiple fields on clicking button in jquery

Question

I have a table with the details of the student. These fields are readonly field and can be edited on clicking the edit button. But I am having problem to select all the input fields of that row at once on clicking the edit button.

Here is my html code

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

And here is the jquery. I have made the checkbox selected on pressing the edit button.

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

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

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

Answer 1

You can simply add this into your click handler

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

Which finds the tr containing the clicked button, locates all of its input elements, and removes their readonly attribute.

Live example: http://jsfiddle.net/zxsq0m5n/

Incidentally, you could use the same trick to locate your checkbox, negating the need to tie it together with the edit button using 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');
});

Live example: http://jsfiddle.net/zxsq0m5n/1/