$(document).on("click", "#check-personalizado", function(){
var check = $(this).attr("checked");
if (!check) {
var check = $(this).attr("checked", true);
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
$(".div-comedor").hide();
$(".div-dmc").hide();
$(".agregarIngredientePersonalizado").removeClass("d-none");
} else {
var check = $(this).attr("checked", false);
$(".div-comedor").show();
$(".div-dmc").show();
$(".agregarIngredientePersonalizado").addClass("d-none");
$(".listaIngredientes").remove()
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
$("#check-comedor").prop("checked", false);
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
$("#check-dmc").prop("checked", false);
}
})
/*============================================
HABILIAR Y DESHABILITAR SELECT COMEDORT Y DMC
==============================================*/
$(document).on("click","#check-comedor", function() {
var check = $(this).attr("checked");
if (!check) {
$("#select-comedor").attr("disabled", false);
$("#cupos-comedor").attr("readonly", false);
var check = $(this).attr("checked", true);
} else {
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
var check = $(this).attr("checked", false);
}
})
$(document).on("click","#check-dmc", function() {
var check = $(this).attr("checked");
if (!check) {
$("#select-dmc").attr("disabled", false);
$("#cupos-dmc").attr("readonly", false);
var check = $(this).attr("checked", true);
} else {
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
var check = $(this).attr("checked", false);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Datos Comedor -->
<div class="row div-comedor">
<!-- Checkbox comedor -->
<div class="col-sm-12 col-md-3 form-group">
<div class="icheck-success">
<input type="checkbox" id="check-comedor" name="check-comedor">
<label class="text-dark" for="check-comedor"> Comedor</label>
</div>
</div>
<!-- Select Menu Comedor-->
<div class="col-sm-12 col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-hamburger"></i></span>
</div>
<select class="form-control ml-2" name="select-comedor" id="select-comedor" disabled>
<option value="">Seleccionar Menu Comedor</option>
</select>
</div>
</div>
<!-- Input cupos Comedor-->
<div class="col-sm-12 col-md-3">
<input class="form-control" type="number" placeholder="0" id="cupos-comedor" readonly>
<span class="small text-muted">Cupos Comedor</span>
</div>
<input type="hidden" name="precioComedor" name="precioComedor"></input>
</div>
<!-- Datos DMC -->
<div class="row div-dmc mt-4">
<!-- Checkbox DMC-->
<div class="col-sm-12 col-md-3 form-group">
<div class="icheck-danger">
<input type="checkbox" id="check-dmc" name="check-dmc">
<label class="text-dark" for="check-dmc"> DMC</label>
</div>
</div>
<!-- Select Menu DMC-->
<div class="col-sm-12 col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-hotdog"></i></span>
</div>
<select class="form-control ml-2" name="select-dmc" id="select-dmc" disabled>
<option value="">Seleccionar Menu DMC</option>
</select>
</div>
</div>
<!-- Input cupos DMC-->
<div class="col-sm-12 col-md-3">
<input class="form-control" type="number" placeholder="0" id="cupos-dmc" readonly>
<span class="small text-muted">Cupos DMC</span>
</div>
<input type="hidden" name="precioDmc" name="precioDmc"></input>
</div>
<!-- CREAR REMITO PERSONALIZADO -->
<hr>
<div class="row mt-4">
<div class="col-6 form-group">
<div class="icheck-warning">
<input type="checkbox" id="check-personalizado" name="check-personalizado">
<label class="text-dark" for="check-personalizado"> Crear Remito Personalizado</label>
</div><span class="small text-muted">Agregar al remito elementos que no pertenezcan a un menú</span>
</div>
<div class="col-3">
<button class="btn btn-warning btn-lg agregarIngredientePersonalizado d-none">Agregar Producto</button>
</div>
</div>
<div class="row">
<div class="col-12">
<!-- ENTRADA PARA AGREGAR INGREDIENTES-->
<div class="form-group ingredientesPersonalizados">
</div>
<input type="hidden" id="ingredientesPersonalizadosFinal" name="ingredientesPersonalizadosFinal">
<input type="hidden" name="precioPersonalizado" name="precioPersonalizado"></input>
</div>
</div>
Tengo un comportamiento inesperado en unos checkbox, estoy utilizando mal la lógica en javascript y no puedo ver el error. El tema es asi:
Tengo 3 checkbox (ver imagen al final de la pregunta), check-dmc
, check-comedor
y check-personalizado
. Los dos primeros, por su parte, al clickearse habilitan un select
y un input
numérico (cada uno tiene su select y su input). El 3er check hace desaparecer los dos anteriores y crea un botón (este check habilitaria un modo personalizado
).
Ahora, si yo salgo del modo personalizado
dando uncheck al check-personalizado
, vuelven a aparecer los dos primeros checks, reiniciados. Pero ya no se comportan como antes.
Ahora en lugar de habilitar un select
y un input
, el check que haya tenido estado checked true en el momento que se hace click en el 3er boton, funciona al reves (puede ser uno, el otro o ambos).
Se muestra uncheck y al clickear sobre él una vez, se checkea pero no cambia el select y el input. Un segundo click, se uncheckea y ahora se muestra el select y el input. El check empieza a funcionar al revés de su comportamiento original.
Coloco el código de cada checkbox y adjunto una imagen para tratar de ilustrar lo que pasa,
Check Comedor (1)
$(document).on("click","#check-comedor", function() {
var check = $(this).attr("checked");
if (!check) {
$("#select-comedor").attr("disabled", false);
$("#cupos-comedor").attr("readonly", false);
var check = $(this).attr("checked", true);
} else {
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
var check = $(this).attr("checked", false);
}
})
Check DMC (2)
$(document).on("click","#check-dmc", function() {
var check = $(this).attr("checked");
if (!check) {
$("#select-dmc").attr("disabled", false);
$("#cupos-dmc").attr("readonly", false);
var check = $(this).attr("checked", true);
} else {
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
var check = $(this).attr("checked", false);
}
})
Check personalizado (3)
$(document).on("click", "#check-personalizado", function(){
var check = $(this).attr("checked");
if (!check) {
alert("hola")
var check = $(this).attr("checked", true);
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
$(".div-comedor").hide();
$(".div-dmc").hide();
$(".agregarIngredientePersonalizado").removeClass("d-none");
} else {
alert("chau")
var check = $(this).attr("checked", false);
$(".div-comedor").show();
$(".div-dmc").show();
$(".agregarIngredientePersonalizado").addClass("d-none");
$(".listaIngredientes").remove()
$("#select-comedor").attr("disabled", true);
$("#cupos-comedor").attr("readonly", true);
$("#check-comedor").prop("checked", false);
$("#select-dmc").attr("disabled", true);
$("#cupos-dmc").attr("readonly", true);
$("#check-dmc").prop("checked", false);
}
})
Intenté resumir el comportamiento que sucede en estos 4 screenshots. Primero, la página inicia normal, con los checks desactivados y los inputs disabled. Puedo clickear en los checks y se comportan de acuerdo a lo esperado. Luego, si doy click en
Remito Personalizado
, y vuelvo a dar click (los dos primeros checks desaparecen y vuelven a aparecer) se comportan como indica el final (En ese caso se ve que el primer checkbox se está comportando al reves, pero si clickeo en el de abajo pasa exactamente lo mismo, debido a que estaba seleccionado cuando se dio click por primera vez al check 3)
$(document).on("click", "#check-personalizado")
en vez de$("#check-personalizado").on("click")
? Creo que deberías plantear los problemas poco a poco, o dar una url de ejemplo, es muy largo de seguir.fragemento js/css
cuyo icono es<>
para agreagar un ejemplo funcional del comportamiento inesperado del que hablas ya que tu pregunta no incluyes el codigo html requerido para las pruebas!