Question

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

当我单击“缺席”按钮时，我想禁用“结帐”按钮。

这是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

2 个答案: