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

Answer 2

你需要这个：

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

您可以使用.closest()遍历tr，然后找到inputs所有: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
});

Answer 4

试试这个

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

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

4 个答案:

Working Demo