1

Al cargarse la pagina necesito que los 3 <select> queden desactivados. y que queden habilitados al darle click en la opción "Buscar venta por fecha" del radio button. Y al elegir otra opción que no sea "Buscar venta por fecha" también se desactiven. De la forma que lo estoy haciendo no da resultados.

Aca el html

<div class="row">

        <div class="col-md-4">

            <input type="radio" onclick="enableInput(txtSearch);" name="option" id="nro-sale" value="nro-sale" checked /> Buscar por id venta

            <br />

            <input type="radio" onclick="disabledInput(txtSearch);" name="option" id="allPurchases" value="allPurchases" /> Ver todas las ventas
          
            <br />

            <input type="radio" onclick="enabled(select);" name="option" id="date" value="date" /> Buscar venta por fecha
           
        </div>

        <div class="form-group col-md-4">
            
            <input type="text" class="form-control" id="txtSearch" name="txtSearch" maxlength="80" required placeholder="id venta" />
        
            <select class="form-control select" id="selectMonth1">
                <option disabled selected>desde el mes</option>
                <option value="1">Enero</option>
                <option value="2">Febrero</option>
                <option value="3">Marzo</option>
                <option value="4">Abril</option>
                <option value="5">Mayo</option>
                <option value="6">Junio</option>
                <option value="7">Julio</option>
                <option value="8">Agosto</option>
                <option value="9">Septiembre</option>
                <option value="10">Octubre</option>
                <option value="11">Noviembre</option>
                <option value="12">Diciembre</option>
            </select>
            
            <select class="form-control select" id="selectMonth2">
                <option disabled selected>hasta el mes</option>
                <option value="1">Enero</option>
                <option value="2">Febrero</option>
                <option value="3">Marzo</option>
                <option value="4">Abril</option>
                <option value="5">Mayo</option>
                <option value="6">Junio</option>
                <option value="7">Julio</option>
                <option value="8">Agosto</option>
                <option value="9">Septiembre</option>
                <option value="10">Octubre</option>
                <option value="11">Noviembre</option>
                <option value="12">Diciembre</option>
            </select>
            
            <select class="form-control select" id="selectYear">
               
                <option disabled selected>Año</option>
               
                @for (int i = 2015; i <= actualYear; i++)
                {
                    <option value="@i">@i</option>
                }

            </select>

        </div>
       
        <div class="form-group col-md-4">
            <button type="button" class="btn btn-default" onclick="SendToActionFiltrarVenta();"><span class="glyphicon glyphicon-search" id="glyphicon-search" aria-hidden="true"></span>Buscar</button>
        </div>

    </div>

y aca desde js las funciones para habilitar y deshabilitar los <select>, donde les paso por parametro el nombre de la clase de los select.

function disabled(className) {

        let elementos = document.getElementsByClassName("className");

        for (var i = 0; i < elementos.length; i++) {
            elementos[i].disabled = true;
        }

    }

    function enabled(className) {

        let elementos = document.getElementsByClassName("className");

        for (var i = 0; i < elementos.length; i++) {
            elementos[i].disabled = false;
        }

    }

Aca para que queden los 3 <select> desactivados al iniciar la pagina

 window.addEventListener("load", disabled(select), false);
 

2 respuestas 2

1

Puedes hacerlo de esta manera. Explico la lógica que he seguido:

  1. Por defecto los select estarán desactivados, para ello he agregado disabled en el HTML de cada uno.
  2. Usaremos querySelectorAll para alcanzar los elementos por grupo. Por un lado, alcanzamos todos los radio y por otro lado todos los select que tienen la clase select.
  3. Asignamos un click listener a los radio y dentro de esa función de escucha verificamos el id del elemento que fue clickeado, si es el que tiene id="date" establecemos una variable para activar los select, de lo contrario siguen desactivados.

Eso es todo.

/*Selector de clases para alcanzar todos los select*/
var allSelects = document.querySelectorAll(".select");
/*Selector de tipo para alcanzar todos los radio*/
var allRadios = document.querySelectorAll("input[type=radio]");

/*Asignamos dentro del bucle un click listener a cada radio*/
allRadios.forEach(function(oneRadio) {
  oneRadio.addEventListener('click', function(e) {
    /*Verificamos el id para decidir si activar o no*/
    isEnabled = !(e.target.id === 'date');

    /*Cambiamos el estado de los select segun el estado de isEnabled*/
    allSelects.forEach(function(oneSelect) {
      oneSelect.disabled = isEnabled;
    });
  });
});
<div class="row">

  <div class="col-md-4">

    <input type="radio" name="option" id="nro-sale" value="nro-sale" checked /> Buscar por id venta

    <br />

    <input type="radio" name="option" id="allPurchases" value="allPurchases" /> Ver todas las ventas

    <br />

    <input type="radio" name="option" id="date" value="date" /> Buscar venta por fecha

  </div>

  <div class="form-group col-md-4">

    <input type="text" class="form-control" id="txtSearch" name="txtSearch" maxlength="80" required placeholder="id venta" />

    <select class="form-control select" id="selectMonth1" disabled>
      <option disabled selected>desde el mes</option>
      <option value="1">Enero</option>
      <option value="2">Febrero</option>
      <option value="3">Marzo</option>
      <option value="4">Abril</option>
      <option value="5">Mayo</option>
      <option value="6">Junio</option>
      <option value="7">Julio</option>
      <option value="8">Agosto</option>
      <option value="9">Septiembre</option>
      <option value="10">Octubre</option>
      <option value="11">Noviembre</option>
      <option value="12">Diciembre</option>
    </select>

    <select class="form-control select" id="selectMonth2" disabled>
      <option disabled selected>hasta el mes</option>
      <option value="1">Enero</option>
      <option value="2">Febrero</option>
      <option value="3">Marzo</option>
      <option value="4">Abril</option>
      <option value="5">Mayo</option>
      <option value="6">Junio</option>
      <option value="7">Julio</option>
      <option value="8">Agosto</option>
      <option value="9">Septiembre</option>
      <option value="10">Octubre</option>
      <option value="11">Noviembre</option>
      <option value="12">Diciembre</option>
    </select>

    <select class="form-control select" id="selectYear" disabled>

      <option disabled selected>Año</option>

      @for (int i = 2015; i
      <=a ctualYear; i++) { <option value="@i">@i</option>
        }

    </select>

  </div>

  <div class="form-group col-md-4">
    <button type="button" class="btn btn-default" onclick="SendToActionFiltrarVenta();"><span class="glyphicon glyphicon-search" id="glyphicon-search" aria-hidden="true"></span>Buscar</button>
  </div>

Si observas el código, es mucho más simple. He quitado todas las funciones in line que tenías para resolver esto, porque lo que hacen más es liar que otra cosa. Aparte de eso, se recomienda evitar funciones in line, porque hacen el código HTML dependiente del código Javascript. Es mejor usar funciones de escucha. Así, el mismo código JS puede ser usado en miles de archivos HTML. Otro problema que tienen las funciones in line es que si tienes que cambiar algo, tienes que ir al HTML a cambiarlo. Con las funciones de escucha no, cambias directamente en JS. Parece que no tiene importancia, pero en un proyecto donde tienes miles o millones de archivos HTML donde has puesto funciones in line, te quiero ver cuando toque cambiar algo... tendrás que recorrer esos miles o millones de HTML cambiando los onclick que hayas puesto en el HTML. Cuando hablo de funciones in line, me refiero a cosas como estas: onclick="enableInput(txtSearch);" No se recomienda usarlas, por lo ya dicho.

1
  • Gracias por el consejo @A. Cedano! muy buen aporte tmb!
    – Claudio
    el 15 jul. 2020 a las 21:41
1

Consideremos que:

  • Invocas a una función llamada enableInput() pero en tu JS tienes algo llamado: enable, del mismo modo el nombre de la función para deshabilitar no coincide.
  • Veo que cuando invocas a la función le pasas como argumento el nombre de lo que parecería ser una clase (txtSearch) pero no veo donde este declarada esta, este texto lo tienes declarado pero como el valor del atributo name que es algo distinto
  • Veo que declaras 2 funciones (una para habilitar y otra para deshabilitar, pero esto lo podemos dejar reducido en una sola)

Entonces, como se me hizo un tanto compleja la forma en la que procedes, aquí te dejo esta propuesta:

Lo puedes solucionar así:

  • Dales una clase en común a los 3 select que quieres estén deshabilitados
  • Dale un id al radio que servirá para habilitar dichos elementos (aunque este debería ser un checkbox )
  • Ahora puedes recuperar con document.querySelectorAll() todos los select en una sola variable
  • Recuperas así mismo el radio en una variable por medio de dicho id
  • Le agregamos un listener al evento DOMContentLoaded al documento
    • Por dentro de la lectura de este evento iteramos con un ciclo foreach todos los nodos que nos devolvió la variable donde recuperamos los select
    • Con la variable que nos devolverá cada select en las iteraciones accedemos a su propiedad disabled y le damos el valor true (esto generará que desde el inicio estén deshabilitados)
    • Posterior agregamos un listener al evento click de la variable que nos representa al checkbox donde evaluaremos:
      • Si esta tiene su propiedad checked con un valor en true entonces habilitamos los select y en caso contrario los mantenemos deshabilitados

    <input id="busqueda" type="checkbox">Buscar por Fecha
    
    <select name="" id="" class="elegir">
      <option value="" class="elegir-opcion">1</option>
      <option value="" class="elegir-opcion">2</option>
      <option value="" class="elegir-opcion">3</option>
    </select>
    <select name="" id="" class="elegir">
      <option value="" class="elegir-opcion">1</option>
      <option value="" class="elegir-opcion">2</option>
      <option value="" class="elegir-opcion">3</option>
    </select>
    <select name="" id="" class="elegir">
      <option value="" class="elegir-opcion">1</option>
      <option value="" class="elegir-opcion">2</option>
      <option value="" class="elegir-opcion">3</option>
    </select>
    
    <script>
      let elegir = document.querySelectorAll('.elegir');
      let busqueda = document.getElementById('busqueda');
      
      document.addEventListener("DOMContentLoaded", () => {
        elegir.forEach(elemento => elemento.disabled = true);
        
        busqueda.addEventListener('click', () => {
          if (busqueda.checked) {
            elegir.forEach(elemento => elemento.disabled = false);
          } else {
            elegir.forEach(elemento => elemento.disabled = true);
          }
        });
      });
    </script>

1
  • 1
    Gracias @BetaM!, perdón por mezclar las funcion enableInput(txtSearch) y disabledInput(txtSearch) ,éstas son funciónes que las estoy llamando desde el archivo funciones.js de mi proyecto para otro objetivo. Excelente tu aporte!
    – Claudio
    el 15 jul. 2020 a las 21:11

Tu Respuesta

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

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