Deshabilitar elemento seleccionado de select con Jquery

publicado por: Anonymous

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.

solución

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.

_x000D_

_x000D_

$('#products').on('change', function (e) {_x000D_
  // primero activamos todos las opciones_x000D_
  $(this).find('option').each(function () {_x000D_
    $(this).removeAttr('disabled');_x000D_
  });_x000D_
  _x000D_
  // Si existe el text area, lo eliminamos_x000D_
  // ya que se ha cambiado de opción_x000D_
  if ($('#otrosArticulos')[0]) {_x000D_
    $('#otrosArticulos').remove();_x000D_
  }_x000D_
  // se obtiene la opción seleccionada_x000D_
  var option = $(this).find(':selected')[0];_x000D_
  _x000D_
  // si es la opción 'otro...' se añade el textarea_x000D_
  if (option.value === '6') {_x000D_
    $('#Formulario')_x000D_
      .append("<textarea id='otrosArticulos'></textarea>");_x000D_
  }_x000D_
  _x000D_
  // eliminamos la opción actual_x000D_
  $(option).attr('disabled', 'disabled');_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<form id="Formulario">_x000D_
  <input _x000D_
    id='nombre' _x000D_
    type='text' _x000D_
    placeholder="Inserta tu nombre..." _x000D_
    required_x000D_
  />_x000D_
  <input _x000D_
    id='mail' _x000D_
    type='email' _x000D_
    placeholder="Inserta tu mail" _x000D_
    required_x000D_
  />_x000D_
  <input _x000D_
    id='telefono' _x000D_
    type='text' _x000D_
    placeholder="Inserta tu telefono"_x000D_
    required_x000D_
  />_x000D_
  <input _x000D_
    id='producto' _x000D_
    type='text' _x000D_
    placeholder="Escribe tu producto" _x000D_
    required_x000D_
  />_x000D_
  <select id="products" required>_x000D_
    <option value="1">Producto 1</option>_x000D_
    <option value="2">Producto 2</option>_x000D_
    <option value="3">Producto 3</option>_x000D_
    <option value="6">Otro...</option>_x000D_
  </select>_x000D_
  <button _x000D_
    type="submit"_x000D_
    onClick="envio()"_x000D_
  >_x000D_
    Solicitar_x000D_
  </button>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *