jQuery - deshabilitar las opciones seleccionadas

Necesita deshabilitar las opciones ya seleccionadas en el cuadro de selección con jQuery. Me gustaría que se oscurezca como asmselect.jQuery - deshabilitar las opciones seleccionadas

Pruebe mi ejemplo here.

//JS 
$("#theSelect").change(function(){   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown().removeClass("hidden"); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
}); 

//HTML 
<body> 
<div class="selectContainer"> 
    <select id="theSelect"> 
     <option value="">- Select -</option> 
     <option value="Patient">Patient</option> 
     <option value="Physician">Physician</option> 
     <option value="Nurse">Nurse</option> 
    </select> 
</div> 
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> 
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div> 
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div> 
</body>

ACTUALIZADO: Aquí está la finished solution. Gracias a Patrick y Simen.

Fuente

2010-05-19 Jeffrey

añadir esta línea a su change controlador de eventos

$("#theSelect option:selected").attr('disabled','disabled') 
     .siblings().removeAttr('disabled');

Esto desactivará la opción seleccionada, y habilitar cualquier opción previamente con discapacidad.

EDIT:

Si no desea volver a habilitar las anteriores, basta con retirar esta parte de la línea:

 .siblings().removeAttr('disabled');

EDIT:

http://jsfiddle.net/pd5Nk/1/

Para volver a habilitar al hacer clic en Eliminar, agréguelo a su controlador de clics.

$("#theSelect option[value=" + value + "]").removeAttr('disabled');

Fuente

2010-05-19 16:21:50 user113716

Actualicé mi respuesta para volver a habilitar la opción adecuada cuando hace clic en 'eliminar'. – user113716

esto también funciona muy bien, gracias. ¿Hay algún inconveniente en usar el hallazgo y los datos como en el ejemplo de Simen? – Jeffrey

Menos código y menos consumo de memoria (sin uso de datos()) que mi respuesta :) Simplemente recuerde actualizar las etiquetas 'rel' de los enlaces en el código original, ya que todos apuntan al paciente –

Esto parece funcionar:

$("#theSelect").change(function(){   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown().removeClass("hidden"); 
    //Add this... 
    $("#theSelect option:selected").attr('disabled', 'disabled'); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
    //...and this. 
    $("#theSelect option:disabled").removeAttr('disabled'); 
});

Fuente

2010-05-19 16:21:09 jeanreis

mismo problema que el primer intento de Patrick. la habilitación en el clic de quitar está renovando todas las opciones deshabilitadas. – Jeffrey

Esto deshabilitará/habilitará las opciones cuando las seleccione/elimine, respectivamente.

$("#theSelect").change(function(){   
    var value = $(this).val(); 
    if (value === '') return; 
    var theDiv = $(".is" + value); 

    var option = $("option[value='" + value + "']", this); 
    option.attr("disabled","disabled"); 

    theDiv.slideDown().removeClass("hidden"); 
    theDiv.find('a').data("option",option); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
    $(this).data("option").removeAttr('disabled'); 
});

Demostración: http://jsfiddle.net/AaXkd/

Fuente

2010-05-19 16:50:52

genial, esto funciona, aunque necesito una adición más. ¿también puede permanecer en el título -seleccionar- y no mostrar la última opción seleccionada? – Jeffrey

Agregue '$ (this) .val ('');' al final de la función 'change'. –

funciona genial, grazie! – Jeffrey

pls probar esto,

$('#select_id option[value="'+value+'"]').attr("disabled", true);

Fuente

2016-12-06 17:10:46

jQuery - deshabilitar las opciones seleccionadas

Respuesta

Cuestiones relacionadas