Question

我有以下代码询问工具是否被占用，如果工具不被占用，则复选框为disabled，否则为enabled。

但是我有一个JavaScript，可以在其中使用库/x-editable更改工具当我更改成功函数中的工具时，我希望该行的复选框为enabled。我有一个代码，但是这样做是enabled所有复选框。

var tools = [];
        $.each({
            "tools1": "tools1",
            "tools2": "tools2",
            "tools3": "tools3",
            "tools4": "tools4"
        }, function(k, v) { tools.push({value: k, text: v});
        });

$('#table').editable({
        container: 'body',
        selector: 'td.Tools',
        title: 'new Tools',
        source: tools,
        showbuttons: false,
        success: function(response) {
          
        $('.form-check-input').closest('tr').find('input[name=choose]').attr('disabled', false);

        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<table id="table" class="table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id
            </th>
            <th>Tools
            </th>
            <th>
            </th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td data-name="id" class="id" data-type="text"> 
          2
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
          Tools1
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn1" class="form-check-input" data-toggle="tooltip" disabled>Choose
        </td>
      </tr>
      <tr>
       <td data-name="id" class="id" data-type="text"> 
          1
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
         Tools3
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn2" class="form-check-input" data-toggle="tooltip" disabled>Choose
        </td>
      </tr>
      <tr>
          <td data-name="id" class="id" data-type="text"> 
          3
        </td>
        <td data-name="Tools" class="editable Tools" data-type="select">
         Tools4
        </td>
        <td>
          <input type="checkbox" name="choose" id="btn3" class="form-check-input" data-toggle="tooltip">Choose
        </td>
      </tr>
    </tbody>
</table>

我希望我解释得很好

Answer 1

$('.form-check-input').closest('tr').find('input[name=choose]').attr('disabled', false);

此行代码启用与form-check-input

类的每个元素最接近的复选框

如果您只想启用正在处理的复选框，则应执行$(this).closest('tr').find('input[name=choose]').attr('disabled', false);

希望这会有所帮助

启用的复选框

1 个答案: