La solución es sencilla, debes capturar que ambas condiciones se cumplan, de lo contrario no lograrás el objetivo.
Lo tienes así:
$('form > div > div > div > input, textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
if($(this).is(":checked")){
empty = true;
}
});
if (empty) {
$('#llamada223').attr('disabled', 'disabled');
} else {
$('#llamada223').removeAttr('disabled');
}
Si te fijas, si la primera condición retorna false
, y la segunda retorna true
, entonces tu variable empty
será true
. Lo mismo si ocurre lo contrario.
Tu necesitas que ambas condiciones a la vez se cumplan para que tu variable empty
evalúe a true
. Puedes probar con:
$('form > div > div > div > input, textarea').each(function() {
if ($(this).val() == '' && $(this).is(":checked")){ // <- ambas deben cumplirse
empty = true;
}
});
if (empty) {
$('#llamada223').attr('disabled', 'disabled');
} else {
$('#llamada223').removeAttr('disabled');
}
Con eso ya podrías resolverlo.
Nota:
Cuando realizamos comparaciones debemos hacerlo usando el operador estricto: (===
). Porque podríamos tener problemas de conversión de tipos.
Por otro lado, siempre es bueno conocer los valores truthy
y/o falsy
a la hora de buscar elementos no definidos o cadenas vacías.
EDICIÓN
Veamos un ejemplo funcional usando JQuery. La idea es habilitar un botón si los elementos input
y textarea
de un formulario contienen información o están tildados (en caso de tipo checkbox
).
La validación la haremos cuando se hace click
sobre el elemento tipo checkbox
. Usando una estructura parecida al código que tienes en tu pregunta, haremos la validación de la siguiente forma:
- Al hacer clic sobre el
checkbox
tenemos 2 posibilidades, que el mismo cambie su estado a checked
o que cambie su estado a unchecked
. Por lo tanto validaremos los campos input
y textarea
sólo cuando el mismo se encuentre checked
.
- Si el
checkbox
se encuentra checked
, recorremos todos los elementos input
y textarea
para verificar su valor. Un input
o textarea
sin datos devolverá un valor de cadena vacío, que podemos evaluar en un entorno booleano y devolverá false
. En cambio si tiene datos devolverá true
.
- Si alguno de los elementos no contiene datos, establecemos la variable
empty
a verdadero y salimos del bucle (no necesitamos seguir verificando, ya que si falla 1 pues no debemos habilitar el botón).
- Al finalizar el ciclo, comprobamos el valor de
empty
, si el mismo es falso podemos habilitar el botón y salimos de la función.
- En caso de que el valor sea verdadero, no hacemos nada, el botón seguirá deshabilitado.
- Si el elemento
checkbox
cambia a unchecked
no necesitamos verificar los elementos de texto, simplemente deshabilitamos el botón sin más.
Aquí el código:
$("#check").on("click", function() {
let empty = false;
if($("#check").prop('checked')) {
$('form input, textarea').each(function() {
if (!$(this).val()) {
empty = true;
return;
}
});
if(!empty) {
$('#button').removeAttr('disabled');
return;
}
}
$('#button').attr('disabled', 'disabled');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="miForm">
<input id="texto" type="text" name="texto">
<br>
<textarea id="area" name="area" rows="5" cols="50"></textarea>
<br>
<input id="check" type="checkbox" name="check">
<br>
<button id="button" type="button" name="button" disabled>Button</button>
</form>
Espero que te quede un poco más clara la lógica.
2da EDICIÓN
Manteniendo el código anterior, sólo añadiremos la lógica para el evento keyup
de cada elemento tipo input
o textarea
. Lo ideal es escribir una sola función que maneje el mismo evento para cada elemento, así no repetimos el código.
Lo que hará nuestra función es verificar si se cumplen 2 condiciones para activar o desactivar el botón. Las condiciones para activar el botón serán: Elemento checkbox
en estado checked
y valor de todos los elementos input
o textarea
contienen datos (no están vacíos).
Veamos:
const onAction = function(event) {
let empty = false;
if($("#check").prop('checked')) {
$('form input, textarea').each(function() {
if (!$(this).val()) {
empty = true;
return;
}
});
if(!empty) {
$('#button').removeAttr('disabled');
return;
}
}
$('#button').attr('disabled', 'disabled');
}
$('form input, textarea').each(function() {
// añadimos el manejador adecuado según el tipo de elemento
if($(this).attr('type') === 'checkbox') {
$(this).on('click', onAction);
} else {
$(this).on('keyup', onAction);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="miForm">
<input id="texto" type="text" name="texto">
<br>
<textarea id="area" name="area" rows="5" cols="50"></textarea>
<br>
<input id="check" type="checkbox" name="check">
<br>
<button id="button" type="button" name="button" disabled>Button</button>
</form>
Como puedes observar, usamos la misma función y se la asignamos al evento adecuado. El tipo de evento que vayas a manejar ya es cosa de tu lógica, puedes probar diferentes opciones, pero normalmente en los campos de texto (input
y textarea
) se usa keyup
.