J'ai deux champs de saisie et je veux que l'autre soit désactivé si l'autre a une valeur. Je l'ai essayé en utilisant jQuery mais rien ne se passe. Quelqu'un peut-il savoir quoi faire à ce sujet? Merci

Mon champ de saisie

<ul>
<li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$<?php echo $data['app1']['salary']; ?> <img src="<?php echo $dirimg; ?>/arrow-right.svg"></a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber" value="<?php echo $data['app1']['salary']; ?>" inputmode="numeric">
</li>
<li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$<?php echo $data['app1']['selfEmployedIncome']; ?><img src="<?php echo $dirimg; ?>/arrow-right.svg"></a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber" value="<?php echo $data['app1']['selfEmployedIncome']; ?>" inputmode="numeric">
</li>
</ul>

JQuery

 $('input').on('input', function() {
    $(this).closest('li').find('input').not(this).prop('disabled', this.value.length)
  });
$('li input').on('input', function() {
    $(this).closest('li').find('input').not(this).prop('disabled', this.value.length)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber"  inputmode="numeric">
</li>
<li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber"  inputmode="numeric">
</li>
</ul>
1
user12110431 7 avril 2020 à 06:09

3 réponses

Meilleure réponse

Vous pouvez faire quelque chose comme ça:

$(document).ready(function() {
  $("#fixedSalary").on("input", function() {
    if ($("#fixedSalary").val() != "") {
      $("#selfEmployed").prop('disabled', true);
    } else {
      $("#selfEmployed").prop('disabled', false);
    }
  });

  $("#selfEmployed").on("input", function() {
    if ($("#selfEmployed").val() != "") {
      $("#fixedSalary").prop('disabled', true);
    } else {
      $("#fixedSalary").prop('disabled', false);
    }
  });
});

$("#btnReset").click(function() {
  $("#fixedSalary").prop('disabled', false);
  $("#selfEmployed").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="fixedSalaryList"><b>Fixed Salary (Monthly)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="salary[]" id="fixedSalary" class="assest-input inputNumber" inputmode="numeric">
  </li>
  <li id="selfEmployedList"><b>Self-Employed Income (Annually)</b>
    <a href="#" class="show-input">$</a>
    <input type="text" name="selfEmployedIncome[]" id="selfEmployed" class="assest-input inputNumber" inputmode="numeric">
  </li>
</ul>

<input type="submit" text="Reset" id="btnReset">
1
Manjuboyz 7 avril 2020 à 03:51

C'est exactement ce que vous cherchiez

$(document).ready(function(){
  $("#selfEmployed").keyup(function(){
  if(!$("#selfEmployed").val()){
  $("#fixedSalary").prop('disabled', false);
  } 
  else {
   $("#fixedSalary").prop('disabled', true);
   }
});


  $("#fixedSalary").keyup(function(){
  if(!$("#fixedSalary").val()) {
  $("#selfEmployed").prop('disabled', false);
  } 
  else {
   $("#selfEmployed").prop('disabled', true);
   }
  }); 
});

Remarque: N'oubliez pas que nous le faisons sur l'événement keyup(), donc même si vous effacez l'entrée, cela fonctionnera.

0
Kunal Raut 7 avril 2020 à 04:12

Vous pouvez le faire avec l'événement change() comme

JQuery

$(document).ready(function(){
  $("#selfEmployed").change(function(){
   $("#fixedSalary").prop('disabled', true);
  });

  $("#fixedSalary").change(function(){
   $("#selfEmployed").prop('disabled', true);
  });

});

Maintenant, cela fonctionnera dans les deux sens.

1
Kunal Raut 7 avril 2020 à 03:49