Can you please take a look at this example and let me know how I can use jquery to enable all inputs existing in the same row as Clicked "Edit" button .btn-edit class?

js:

$(".btn-edit").on("click", function(){
  $(this).attr("disabled", true);   
});

and HTML

<div class="container">
<div class="row">
 <table class="table table-striped">
  <thead>
    <tr>
      <th>
        Col 1
      </th>
              <th>
        Col 2
      </th>
            <th>
        Col 4
      </th>
            <th>
        Col 4
      </th>
      <th>
        Col 5
      </th>
      <th>
        Col 3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning btn-edit">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
     <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
     <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
  </tbody>
</table>

Can you please take a look at this example and let me know how I can use jquery to enable all inputs existing in the same row as Clicked "Edit" button .btn-edit class?

js:

$(".btn-edit").on("click", function(){
  $(this).attr("disabled", true);   
});

and HTML

<div class="container">
<div class="row">
 <table class="table table-striped">
  <thead>
    <tr>
      <th>
        Col 1
      </th>
              <th>
        Col 2
      </th>
            <th>
        Col 4
      </th>
            <th>
        Col 4
      </th>
      <th>
        Col 5
      </th>
      <th>
        Col 3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning btn-edit">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
     <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
     <tr>
                <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
                          <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
      <td>
         <input type="text" class="form-control" id="" disabled="disabled">
      </td>
              <td>
           <button type="button" class="btn btn-success" disabled="disabled">
                        <span class="glyphicon glyphicon-refresh"></span> Update
                    </button>
      </td>
      <td>
           <button type="button" class="btn btn-danger" disabled="disabled">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
      </td>
      <td>
        <button type="button" class="btn btn-warning">
                        <span class="glyphicon glyphicon-edit"></span>  Edit
                    </button>
      </td>
    </tr>
  </tbody>
</table>

• javascript
• jquery

4 Answers 4

You need to traverse to closest tr element, find inputs and buttons in it and set property disabled as false for them:

$(".btn-edit").on("click", function(){
  $(this).closest('tr').find('input,button').prop('disabled', false);   
});

Working Demo

you need this:

$(".btn-edit").on("click", function(){
   $(this).closest('tr').find(':input').filter(':disabled').prop("disabled", false);   
});

You can use .closest() to traverse up to the tr then find all the inputs with :input and filter them not to select the button elements which are enabled by default.

You can use .closest() to traverse upwards to tr then use .find() to find all inputs using :input.

Use

$(".btn-edit").on("click", function() {
    $(this)
        .closest('tr') //Travese to parent tr
        .find(':input') //Find all input
        .prop("disabled", false); //set diabled false
});

Try this

$(".btn-edit").on("click", function(){
  $(this).closest('tr').find('input,button').prop('disabled', false);  
});