jQuery - disable input field based on another field input value inside table

Question

When I input the value in the debit column the credit column will be disabled. Again when I input the value in the credit column the debit column will be disabled. Here's what I'm trying to do to make it happen on every row:

HTML:

<table id="table">
<thead>
    <tr>
        <th>Accounts Ledger</th>
        <th>Debit</th>
        <th>Credit</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select></select>
        </td>
        <td><input type="number" class="input-value dr"></td>
        <td><input type="number" class="input-value cr"></td>
    </tr>
</tbody>

jQuery:

    $('input.input-value').focusout(function(){
        var debit = $(this).closest('tr td:nth-child(2) input');
        var credit = $(this).closest('tr td:nth-child(3) input');

        if(parseInt(debit.val()) > 0) {
            credit.attr('disabled','disabled');
        }else{
            debit.attr('disabled','disabled');
        }
        if(parseInt(credit.val()) > 0) {
            debit.attr('disabled','disabled');
        }else{
            credit.attr('disabled','disabled');
        }
    })

Unfortunately, it's not working.

I saw a post on StackOverflow that has a great solution but I can't figure out how it would work for tables. The code is as follows:

 <input id="input1" type="text">
 <input id="input2" type="text">

 let secondInput = $('#input2');
    $("#input1").on(
        "input propertychange",
        event => secondInput.prop(
            'disabled',
            event.currentTarget.value !== "")
  );

Any help would be appreciated.

Rory McCrossan · Accepted Answer · 2023-01-15 16:03:17Z

1

To do what you require you can hook to the input event of the input and then disable any other input on the same row, using closest(), find(), not() and prop():

$('input.input-value').on('input', e => {
  let $input = $(e.target);
  let $otherInput = $input.closest('tr').find('input').not($input);
  $otherInput.prop('disabled', $input.val().trim().length > 0)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<table id="table">
  <thead>
    <tr>
      <th>Accounts Ledger</th>
      <th>Debit</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select></select>
      </td>
      <td><input type="number" class="input-value dr"></td>
      <td><input type="number" class="input-value cr"></td>
    </tr>
  </tbody>
</table>

answered Jan 15, 2023 at 16:03

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abzal Ali Over a year ago

Thanks for the great help it's fine just one issue it's not working on the appended new row. Can you please help with it?

Rory McCrossan Over a year ago

Sure, you'd need to use a delegated event handler for dynamic content: $('table').on('input', 'input.input-value', e => {...

Collectives™ on Stack Overflow

jQuery - disable input field based on another field input value inside table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related