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

Question

您能否请看一下这个例子,让我知道如何使用jquery来启用与Clicked"Edit"按钮.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);   
});

工作演示

Answer 2

你需要这个:

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

您可以使用.closest()遍历,tr然后查找所有inputswith :input并过滤它们,不要选择button默认启用的元素.

Answer 3

您可以使用.closest()向上遍历tr然后使用.find()来查找所有输入:input.

使用

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