Question 10935 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make specific input readonly and take value (0.00) when a specific value exists in another input using jQuery

$(document).on('change keyup', '.debtor , .creditor', function() {
  //get amt and qty value
  var debtor = $(this).closest('tr').find('.debtor').val();
  var creditor = $(this).closest('tr').find('.creditor').val();
  if (debtor > 0) {
    $(this).closest('tr').find('.creditor').val(0).css("pointer-events", "none", "cursor", "not-allowed");
  } else {}
  if (creditor > 0) {
    $(this).closest('tr').find('.debtor').val(0).css("pointer-events", "none", "cursor", "not-allowed");
  } else {}
});
<td class="td"><input type="number" class="form-control debtor"></td>
<td class="td"><input type="number" class="form-control creditor"></td>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

I am trying to make one of the two inputs take the read-only property automatically and take value (0.00) when the other input has any value entered, and when this value is deleted (i.e. when emptying the field that has a value) the two inputs take the normal position and are open to accepting values, so as soon as I write a value in any one of them it takes The other one is read-only mode and take value (0.00), and the (cursor","not-allowed) property is enabled automatically, and as soon as the value is deleted from the other input , the read-only mode is canceled and the (cursor","not-allowed) property is removed automatically.

Tags:

2

Answers


  1. 0

    Add two input event listeners to debtor and creditor which modify the other corresponding to its value:

    $(selector).on('input', function() {
  if (this.value) {
      $(otherSelector).prop('readonly', true);
  } else {
      $(otherSelector).prop('readonly', false);
  }
});

    This can be shortened as:

    $(selector).on('input', function() {
    $(otherSelector).prop('readonly', !!this.value);
});

    Try it:

    $('.debtor').on('input', function() {
    $('.creditor').prop('readonly', !!this.value);
});
$('.creditor').on('input', function() {
    $('.debtor').prop('readonly', !!this.value);
});
    input:read-only {
  background: #ddd;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<div>
  <input type="number" class="form-control debtor">
</div>
<div>
  <input type="number" class="form-control creditor">
</div>
    Login or Signup to reply.
  2. 0

    you can try this to achieve the desired behavior….

    $(document).on('change keyup', (e) => {
if (e.target.classList.contains("debtor")) {
    if (parseInt(e.target.value) > 0) {
        $(".creditor").val(0).css("pointer-events", "none", "cursor", "not-allowed");
    }
} else if (e.target.classList.contains("creditor")) {
    console.log("creditor", e.target.value);
    if (parseInt(e.target.value) > 0) {
        $(".debtor").val(0).css("pointer-events", "none", "cursor", "not-allowed");
    }
}

    });

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search