如何使用 jQuery 访问上一个输入元素

Question

我正在尝试访问一个输入元素，这样我就可以在单击另一个输入按钮时禁用它。出于某种原因，我在尝试了几十种不同的方法后无法得到它。

我想在单击 'Absent' 按钮时禁用 'Checkout' 按钮。

这里是 HTML 和 Javascript

$(document).on('click','.absent',function(e) {

   e.preventDefault();

   var t = $(this);
 
   //t.parent('td.checkout').prop('disabled', true);
    t.closest('.checkout').prop('disabled', true);
    
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<td>
  <input type="button" class="checkin" value="Check-in" id="checkin_datetime" name="checkin_datetime">
</td>
<td class="nowrap">
  <input class="checkout" type="button" value="Check-out" id="checkout_datetime" name="checkout_datetime">
</td>
<td class="nowrap">
  <input class="absent Y" type="button" value="Mark Absent" id="absent_flag" name="absent_flag">
</td>

https://jsfiddle.net/cary/pjatf31y/9/

Answer 1

最接近 DOM，但定位 .checkout 将失败，因为那不是被点击按钮的祖先。使用 t.closest('td').prev().find('.checkout').prop('disabled', true);:

$(document).on('click', '.absent', function(e) {
  e.preventDefault();
  var t = $(this);
  t.closest('td').prev().find('.checkout').prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="button" class="checkin" value="Check-in" id="checkin_datetime" name="checkin_datetime">
    </td>
    <td class="nowrap">
      <input class="checkout" type="button" value="Check-out" id="checkout_datetime" name="checkout_datetime">
    </td>
    <td class="nowrap">
      <input class="absent Y" type="button" value="Mark Absent" id="absent_flag" name="absent_flag">
    </td>
  </tr>
</table>

Answer 2

希望对您有所帮助

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<table>
    <tr>
        <td>
            <input type="button" class="checkin" value="Check-in" id="checkin_datetime" name="checkin_datetime">
        </td>
        <td class="nowrap">
            <input class="checkout" type="button" value="Check-out" id="checkout_datetime" name="checkout_datetime">
        </td>
        <td class="nowrap">
            <input class="absent Y" type="button" value="Mark Absent" id="absent_flag" name="absent_flag">
        </td>
    </tr>
</table>
<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('click','.absent',function(e) {
                $(this).closest('td').prev('td').find('.checkout').prop('disabled', true);
            });
        });
</script>
</body>
</html>

如何使用 jQuery 访问上一个输入元素

How to access previous input element using jQuery

jquery

closest