1

Buenas tardes. Dispongo de una lista select con varios elementos options. Me gustaría que al marcar sobre un elemento de la lista, el elemento seleccionado se deshabilite hasta que no se pulse sobre otro elemento de la lista. Muchas gracias por adelantado.

Adjunto parte del codigo. Primero vemos aqui la parte referente al html:

<form id="Formulario">
  <input id='nombre' type = 'text' placeholder="Inserta tu nombre..." required>
  <input id='mail' type = 'email' placeholder="Inserta tu mail" required>
  <input id='telefono' type = 'text' placeholder="Inserta tu telefono" required>
  <input id='producto' type = 'text' placeholder="Escribe tu producto" required>
  <select>
    <option value="1" id="p1">Prod1</option>
    <option value="2" id="p2">Prod2</option>
    <option value="3" id="p3">Prod3</option>
    <option value="6" id='otro'>Otro...</option>
  </select>
  <button type="submit" onClick="envio()">Solicitar</button>
</form>

Y a continuación un fragmento de jquery:

$("#Formulario").on('click', '#otro', function(ev){
        ev.preventDefault()
        $('#Formulario').append("<textarea id='otrosArticulos'></textarea>");
    });

    $("#Formulario").on('click', '#prod1', function(ev){
            ev.preventDefault()
            $('#otrosArticulos').remove(); 

    }); //Esto elimina el textarea creado al pulsar sobre el option Otros.
1
  • Deberias de poner lo que tienes de código para ver como te podemos ayudar.
    – M. Gress
    Commented el 8 abr. 2017 a las 13:52

2 respuestas 2

2

En lugar de añadir ids a las opciones, añade un id al select y en el evento change pon toda la lógica.

$('#products').on('change', function (e) {
  // primero activamos todos las opciones
  $(this).find('option').each(function () {
    $(this).removeAttr('disabled');
  });
  
  // Si existe el text area, lo eliminamos
  // ya que se ha cambiado de opción
  if ($('#otrosArticulos')[0]) {
    $('#otrosArticulos').remove();
  }
  // se obtiene la opción seleccionada
  var option = $(this).find(':selected')[0];
  
  // si es la opción 'otro...' se añade el textarea
  if (option.value === '6') {
    $('#Formulario')
      .append("<textarea id='otrosArticulos'></textarea>");
  }
  
  // eliminamos la opción actual
  $(option).attr('disabled', 'disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="Formulario">
  <input 
    id='nombre' 
    type='text' 
    placeholder="Inserta tu nombre..." 
    required
  />
  <input 
    id='mail' 
    type='email' 
    placeholder="Inserta tu mail" 
    required
  />
  <input 
    id='telefono' 
    type='text' 
    placeholder="Inserta tu telefono"
    required
  />
  <input 
    id='producto' 
    type='text' 
    placeholder="Escribe tu producto" 
    required
  />
  <select id="products" required>
    <option value="1">Producto 1</option>
    <option value="2">Producto 2</option>
    <option value="3">Producto 3</option>
    <option value="6">Otro...</option>
  </select>
  <button 
    type="submit"
    onClick="envio()"
  >
    Solicitar
  </button>
</form>

1
  • 1
    Muchas gracias. He hecho las modificaciones que me has sugerido y he aplicado el código y funciona a la perfección. Muchas gracias. Commented el 8 abr. 2017 a las 14:23
0

solo tienes que cambiar el atributo disabled

var option = $("#myOption");
option.attr('disabled', true );

también puedes usar:

document.getElementById('myOption').disabled = true;

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.