Disable selected element of select with Jquery

Question

Disable selected element of select with Jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good afternoon. I have a select list with several options. I would like that when you click on an item in the list, the selected item is disabled until you click on another item in the list. Thank you very much in advance.

I attach part of the code. First we see here the part referring to the 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>

And then a fragment of 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.

jquery

asked by AntonioMP87 08.04.2017 в 15:50

source

2 answers

0

you just have to change the disabled attribute

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

you can also use:

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

answered by 08.04.2017 в 16:08

Simplify / Optimize FOR Connection of SQL SERVER 2012 with Codeigniter

score 1 · Accepted Answer

Instead of adding ids to the options, add an id to the select and in the event change put all the logic.

$('#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>