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/

Answer 2

$('.btn.btn-info.btn-xs').on('click', function (e) {
  var $btn = $(e.currentTarget),
      newClass = '.' + $btn.attr('id');

  $btn
    .parents('tr')
      .find(newClass).prop('checked', true)
      .end()
      .find('input').removeAttr('readonly');
});

Answer 3

You can update your code to following

Logic - Get the tr row ie parent of parent of input -> tr -> td -> button. Then for that row find all the input and remove the attribute. Please note you can add conditions if required

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

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

    $('.'+newClass).prop('checked','true');
    $(this).parent().parent().find("input").each(function(){ 
         $(this).removeAttr("readonly");
    });
 });