Enable Select Field with Javascript

Question

Expensive,

I have an input text that will receive a date, and after filling this field, I need the selected combo to be activated. By default, they are disabled.

if (document.getElementById("payment").value.length > 0){
    document.getElementById('campo1').disabled = false;
    document.getElementById('campo2').disabled = false;
    document.getElementById('campo3').disabled = false;
    document.getElementById('campo4').disabled = false;
} else {
    document.getElementById('campo1').disabled = true;
    document.getElementById('campo2').disabled = true;
    document.getElementById('campo3').disabled = true;
    document.getElementById('campo4').disabled = true;
} 

The page loads with disabled inputs, but when I set a date in input (payment), the selects combos remain disabled. What am I doing wrong?

Grateful.

Answer 1

then it’ll look something like this here

$( document ).ready(function() {
    $("#payment").keyup(function(){
       if($(this).val()) {
          $("#campo1").prop('disabled', true);
          $("#campo2").prop('disabled', true);
          $("#campo3").prop('disabled', true);
          $("#campo4").prop('disabled', true);
       } else {
          $("#campo1").prop('disabled', false);
          $("#campo2").prop('disabled', false);
          $("#campo3").prop('disabled', false);
          $("#campo4").prop('disabled', false);
       }
    });
});

ready that should be enough , if something is missing warn.

follows fiddle link https://jsfiddle.net/joqs83mg/

Answer 2

$(document).ready( function() {


  $("#payment").change( function() {
    
      var value = $("#payment").val();
    
          if (value == "") {
      $(".campo").removeAttr("disabled");
      }
    else {
      $(".campo").attr("disabled", "true");
      }
    
    });
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<input id="payment" type="text">

    <div class="checkbox">
      <label><input class="campo" type="checkbox" value="">1</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" type="checkbox" value="">2</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" type="checkbox" value="">3</label>
    </div>
    <div class="checkbox">
      <label><input class="campo" type="checkbox" value="">4</label>
    </div>

I made this code for you, I don’t know if that’s how you want it, but that’s it! Just give the run and test!