Как получить доступ к предыдущему элементу ввода с помощью jQuery - PullRequest
Новая
       29

Как получить доступ к предыдущему элементу ввода с помощью jQuery

0 голосов
/ 26 апреля 2019

Я пытаюсь получить доступ к элементу ввода, чтобы можно было отключить кнопку ввода при нажатии другой. Почему-то я не могу получить его после попытки нескольких десятков различных методов.

Я хочу отключить кнопку «Оформить заказ» при нажатии кнопки «Отсутствует».

Вот 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/

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Ближайший перемещается вверх по 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>
0 голосов
/ 27 апреля 2019

Надеюсь, что эта помощь 

<!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>
...