4

Estoy intentado desabilitar un input al seleccionar un check pero, o no me reconoce la función, o no sé lo que esté haciendo mal.

Este es mi código:

function desabilitar()
{
    var rangoSinPrecio = document.getElementById('rangoSinPrecio').checked;
    var precio = document.getElementById('precio');
    if (rangoSinPrecio === true) {
        precio.disabled = true;
    } else if (rangoSinPrecio === false) {
        precio.disabled = false;
    }
}
<input type="range" class="custom-range" id="precio" min="0" max="100000" value="0">
<input class="form-check-input" type="checkbox" value="" id="rangoSinPrecio">

1
  • Puedes omitir muchos pasos en tus ifs, pero el detalle es, ¿en que momento mandas llamar a deshabilitar? Commented el 11 abr. 2020 a las 6:40

3 respuestas 3

3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>JS - Disable inputs with checkboxes</title>

    <style type="text/css">
        .content {
            padding: 5%;
        }
        .content div {
            margin-top: 5%;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>JS - Disable inputs with checkboxes</h1>

        <form name="form">
            <div>
                <input type="text" id="input-1"/> Input 1
            </div>
            <div>
                <input type="number" id="input-2"/> Input 2
            </div>
            <div>
                <input type="checkbox" id="check-1"> Disable Input 1
            </div>
            <div>
                <input type="checkbox" id="check-2"> Disable Input 2
            </div>

            <hr>
            <div>
                <input type="button" id="restart" value="Restart">
            </div>
        </form>
    </div>

    <script>

        /**
         * Functions
         *
         */

        function $(element_id)
        {
            return document.getElementById(element_id);
        }
        function swapInputDisabled(element_id)
        {
            const state = $(element_id).disabled;
            $(element_id).disabled = ! state;
        }
        function disableInput(element_id)
        {
            $(element_id).disabled = false;
        }


        /**
         * Event listeners
         *
         */

        $('check-1').addEventListener("click", () => {
            swapInputDisabled('input-1');
        });
        $('check-2').addEventListener("click", () => {
            swapInputDisabled('input-2');
        });
        $('restart').addEventListener("click", () => {
            disableInput('input-1');
            disableInput('input-2');
        });
    </script>
</body>
</html>

1

necesitas algo así:

let rangoSinPrecio = document.getElementById("rangoSinPrecio");
rangoSinPrecio.addEventListener('click', (e) => {
    let precio = document.getElementById("precio");
    let checked = e.toElement.checked;

    if (checked) {
        precio.disabled = true;
    } else {
        precio.disabled = false;
    }
});
<input type="range" class="custom-range" id="precio" min="0" max="100000" value="0">
        <input class="form-check-input" type="checkbox" value="" id="rangoSinPrecio">

Saludos.

1

Debería alcanzar con hacer lo siguiente:

  • Recupera en variables tanto al input de tipo range como al input de tipo checkbox
  • Revisaremos en la variable que almacena al checkbox su evento click asignando a ella un listener a dicho evento
  • En caso de que exista dicho evento pasamos a la función anónima la variable del input de tipo range y en su propiedad disabled la colocamos a true

Ejemplo

    <input type="range" class="custom-range" id="precio" min="0" max="100000" value="0">
      <input class="form-check-input" type="checkbox" value="" id="rangoSinPrecio">
    
    <script>
    let precio = document.getElementById("precio")
    let cajaChecada = document.getElementById("rangoSinPrecio")
    
    cajaChecada.addEventListener("click", () => {
      console.log(precio)
      precio.disabled = true
    })
    </script>

Ahora si deseas tener la posibilidad de habilitar y deshabilitar, entonces:

  • En un condicional verifica si la propiedad disabled es true, en ese caso la deshabilitamos para poder mover la barra del input y en caso contrario impedimos dicho comportamiento

Código

    <input type="range" class="custom-range" id="precio" min="0" max="100000" value="0">
      <input class="form-check-input" type="checkbox" value="" id="rangoSinPrecio">
    
    <script>
    let precio = document.getElementById("precio")
    let cajaChecada = document.getElementById("rangoSinPrecio")
    
    cajaChecada.addEventListener("click", () => {
      if(precio.disabled) {
        precio.disabled = false
      } else {
        precio.disabled = true
      }
    })
    </script>

1
  • Creo que las validaciones dependen de si cajaChecada isChecked, en todo caso omites el if y puede usar precio.disabled = cajaChecada.checked Commented el 11 abr. 2020 a las 6:49

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.