0

Tengo un modal donde poseo varios checkbox, pero hay uno en particular que al momento de cargar esta deshabilitado, pero al momento de activarlo no mantiene el Style correspondiente al Bootstrap. Si no que queda en gris (pero sí se puede hacer check).

introducir la descripción de la imagen aquí

El problema es el check de abajo (Descanso por Maternidad) que se activa pero queda en ese color.

JavaScript:

$(document).ready(function() {
document.getElementById("DescansoMaternidad").disabled = true;
});

$("#sexoPersona").change(function() {
    let generoPersona = $("#sexoPersona").val();
    if(generoPersona == 1) {
        document.getElementById("DescansoMaternidad").disabled = false;
    } else {
        document.getElementById("DescansoMaternidad").disabled = true;
        $("#DescansoMaternidad").iCheck('uncheck');
    }
});

HTML:

<div id="contTiempoCompe" class="col-sm-12">
    <div class="col-sm-6">
        <div class="i-checks">
            <label id="lblDescansoMaternidad">
            <input type="checkbox" id="DescansoMaternidad" name="DescansoMaternidad" value="1" >
            <i></i>&nbsp;<strong>Descanso por Maternidad</strong>
            </label>                        
        </div>
    </div>
    <div class="col-sm-6">
        <div class="i-checks">
            <label id="lblAutorizacionAusentarse">
            <input type="checkbox" id="AutorizacionAusentarse" name="AutorizacionAusentarse" value="1">
            <i></i>&nbsp;<strong>Autorizaci&oacute;n Programada para Ausentarse</strong>
            </label>                        
        </div>
    </div>
</div>
6
  • Probablemente tiene la clase 'disabled' del plugin que utilizas.
    – LuiscYm
    el 19 jun. 2019 a las 17:52
  • como así? @LuiscYm
    – Juan Pablo
    el 19 jun. 2019 a las 18:00
  • Si, puede que en el html que pinta ese elemento tenga la clase o la propiedad disabled. Por lo cual el check tiene ese aspecto. Sería bueno que agregues el html para descartar esa posibilidad.
    – LuiscYm
    el 19 jun. 2019 a las 18:07
  • Listo @LuiscYm documento modiicado
    – Juan Pablo
    el 19 jun. 2019 a las 18:09
  • 1
    Indicanos por favor qué libreria CSS estás usando o añade el respectivo a los checkbox. el 20 jun. 2019 a las 13:32

2 respuestas 2

1

Deberias utilizar las propiedades de Jquery nativas para checkear y deshabilitar.

$('#DescansoMaternidad').prop('checked', true);
$('#DescansoMaternidad').prop('checked', false);

y

$("#DescansoMaternidad").attr("disabled", true);
$("#DescansoMaternidad").attr("disabled", false);

Intenta utilizar el siguiente código y me comentas:

$("#sexoPersona").change(function(){
    let generoPersona = $("#sexoPersona").val();
    if(generoPersona == 1){
        $("#DescansoMaternidad").attr("disabled", false);
        $("#DescansoMaternidad").removeAttr("disabled");
        $('#DescansoMaternidad').removeClass('disabled').addClass('enabled');
    }else{
        $("#DescansoMaternidad").attr("disabled", true);
        $("#DescansoMaternidad").prop("checked", false);

        $('#DescansoMaternidad').removeClass('enabled').addClass('disabled');

    }
6
  • Sigue igual... se puede checkear pero queda en gris
    – Juan Pablo
    el 19 jun. 2019 a las 19:59
  • Estimado, añadí 2 líneas de código que quitan o agregan la propiedad señalada, me comentas como te va.
    – harifo
    el 19 jun. 2019 a las 20:35
  • Queda igual, no exste un cambio visible :/
    – Juan Pablo
    el 19 jun. 2019 a las 20:44
  • mmm, mira, voy a editar nuevamente la respuesta. EDIT en la edición añadí removeClass y addClass para setear correctamente los cambios de CSS. Me comentas
    – harifo
    el 19 jun. 2019 a las 20:51
  • nada de nada, refresque y limpie caché
    – Juan Pablo
    el 19 jun. 2019 a las 20:55
0

Buen día.

Te comento que tomé el extracto de tu código, lo pegué en uno de mis proyectos y el checkbox no funcionaba ya que no me dejaba hacer el check, asi que cambié el true por false de tu javascript y funciona tanto el check como el estilo.

Te dejo la imagen:

introducir la descripción de la imagen aquí

Espero te sirva...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.