Nuevo en jquery pero estoy trabajando en un calendario receptivo. Ahora tengo una fecha de inicio y un campo de fecha de finalización. Si se completa la fecha de finalización, se muestra la casilla de verificación de recurrencia, ya que la elimina de la clase no visible.
¿Cómo puedo agregar un cheque en la fecha de inicio también? Quiero que la casilla de verificación se muestre cuando los campos de inicio y finalización estén llenos, no solo uno.
$("#end_date").on("input", function (){ if($('#end_date').length >= 1) { $("#reoccurrence").removeClass('not-visible'); } else { $("#reoccurrence").addClass('not-visible'); } }); .not-visible { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col"> <div class="md-form md-form-container-fix"> <input type="text" id="start_date" class="form-control date-picker" name="start_date" required /> <label for="start_date">Start Date</label> </div> </div> <div class="col"> <div class="md-form md-form-container-fix"> <input type="text" id="end_date" class="form-control date-picker" name="end_date" required /> <label for="end_date">End Date</label> </div> </div> <div class="form-check not-visible" id="reoccurrence" name="reoccurrence"> <input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" /> <label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label> </div>En este contexto, usar la length le dirá si esa entrada existe en el DOM (0 = no existe, 1 = existe), pero no evaluará los valores de las entradas.
longitud
El número de elementos en el objeto jQuery.
El número de elementos que coinciden actualmente.
En cambio, recomiendo usar val() para verificar que los valores de ambas entradas no sean cadenas vacías.
En la demostración a continuación, defino cada entrada y el elemento de "recurrencia" como variables. Uso add() para combinar las dos entradas y vincular el controlador de eventos a ambas. Alternativamente, puede simplemente seleccionar ambas entradas: $("#start_date,#end_date") ; ver selector múltiple .
Al ingresar, defino una variable booleana "oneEmpty" basada en los valores de ambas entradas. Luego, uso toggleClass() para "agregar o eliminar una o más clases... dependiendo del... valor del argumento de estado".
Cuando cualquiera de las entradas está vacía, el estado "oneEmpty" es true y la clase "no visible" está activada. Cuando se completan ambas entradas, el estado es false y la clase se desactiva.
var $start_date = $('#start_date'); var $end_date = $('#end_date'); var $reoccurrence = $("#reoccurrence"); $start_date.add($end_date).on("input", function() { let oneEmpty = $start_date.val() == '' || $end_date.val() == ''; $reoccurrence.toggleClass('not-visible', oneEmpty); }); .not-visible { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col"> <div class="md-form md-form-container-fix"> <input type="text" id="start_date" class="form-control date-picker" name="start_date" required /> <label for="start_date">Start Date</label> </div> </div> <div class="col"> <div class="md-form md-form-container-fix"> <input type="text" id="end_date" class="form-control date-picker" name="end_date" required /> <label for="end_date">End Date</label> </div> </div> <div class="form-check not-visible" id="reoccurrence" name="reoccurrence"> <input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" /> <label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label> </div>