在带输入的行中启用按钮

Question

我的表中有2个输入和按钮的行，我想在启用两个输入时启用按钮，

$(document).ready(function() {
$(this).find('.save-btn').prop('disabled', true);
  $('.input').keyup(function() {
    $row = $(this).closest('tr');
    var value = $row.find('input[name="value"]').val();
    var date = $row.find('input[name="name"]').val();
    $(this).closest('tr').find('.save-btn').prop('disabled', !(value && date));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr> 

    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr> 

    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr>
</table>

我使用ajax和find方法保存输入但是我无法使用它来启用和禁用按钮，有什么帮助吗？

Answer 1

您好像瞄准了错误的名字。您可以定位名称为value而非date的输入。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(this).find('.save-btn').prop('disabled', true);
  
  $('.input').keyup(function() {
    var $row = $(this).closest('tr'),
        value = $row.find('input[name="date"]').val(),
        date = $row.find('input[name="name"]').val();
    $row.find('.save-btn').prop('disabled', !(value && date));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr> 

    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr> 

    <tr>
        <td><input type="text" class="input" name="date"></td>
        <td><input type="text" class="input" name="name"></td>
        <td><button class="btn save-btn">Save</button></td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

启用输入后，这意味着您可以输入任何内容。同时，您可以在keydown，keyup或keychange上实现启用按钮。