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>
deshabilitar
?