javascript - 如何使用编辑按钮启用表行中的所有输入

Question

您能看一下this example吗？并让我知道如何使用 jquery 启用与单击“编辑”按钮 .btn-edit 类同一行中存在的所有输入？

js:

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

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

Answer 1

您需要遍历到最近的 tr 元素，找到其中的输入和按钮，并将它们的属性 disabled 设置为 false:

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

Working Demo