¿Cómo deshabilitar/habilitar el campo de selección usando jQuery?

Question

Me gustaría crear una opción en una forma como

[] I would like to order a [selectbox with pizza] pizza 

donde selectbox sólo se activa cuando la casilla de verificación está activada y desactivada cuando no se controla.

llego a tener este código:

<form> 
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza"> 
I would like to order a</label> 
<select name="pizza_kind"> 
    <option>(choose one)</option> 
    <option value="margaritha">Margaritha</option> 
    <option value="hawai">Hawai</option> 
</select> 
pizza. 
</form> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</script> 
<script> 
var update_pizza = function() { 
    if ($("#pizza").is(":checked")) { 
     $("#pizza_kind").removeAttr("disabled"); 
    } 
    else { 
     $("#pizza_kind").prop('disabled', 'disabled'); 
    } 
}; 

$(update_pizza); 
$("#pizza").change(update_pizza); 
</script> 

Probé varios métodos de cómo establecer el atributo de personas con discapacidad mediante .prop(), .attr() y .disabled=. Sin embargo, nada sucede. Al aplicar a un <input type="checkbox"> en lugar de <select>, el código funciona perfectamente.

Cómo deshabilitar/habilitar <select> usando jQuery?

Answer 1

¿Le gustaría utilizar código como el siguiente:

<form> 
    <input type="checkbox" id="pizza" name="pizza" value="yes"> 
    <label for="pizza">I would like to order a</label> 
    <select id="pizza_kind" name="pizza_kind"> 
    <option>(choose one)</option> 
    <option value="margaritha">Margaritha</option> 
    <option value="hawai">Hawai</option> 
    </select> 
    pizza. 
</form> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> 
    var update_pizza = function() { 
    if ($("#pizza").is(":checked")) { 
     $('#pizza_kind').prop('disabled', false); 
    } 
    else { 
     $('#pizza_kind').prop('disabled', 'disabled'); 
    } 
    }; 
    $(update_pizza); 
    $("#pizza").change(update_pizza); 
</script> 

Aquí está trabajando example

Answer 2

Buena pregunta: creo que la única manera de lograr esto es filtrando los elementos en la selección.
Puede hacerlo a través de un plugin jquery. Consulte el siguiente enlace, que describe cómo lograr algo similar a lo que necesita. Gracias
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

utilizar lo siguiente:

$("select").attr("disabled", "disabled"); 

o simplemente añadir id="pizza_kind"-<select> etiqueta, como <select name="pizza_kind" id="pizza_kind">: jsfiddle link

La razón por la que su código no funciona es simplemente porque no es $("#pizza_kind") seleccionando el elemento <select> porque no tiene id="pizza_kind".

Editar: en realidad, un selector mejor es $("select[name='pizza_kind']"): jsfiddle link

Answer 4

Para poder activar/desactivar en primer lugar sus selecciona necesitan una identificación o una clase de selecciones. Posteriormente, se podría hacer algo como esto:

Desactivar:

$('#id').attr('disabled', 'disabled'); 

Habilitar:

$('#id').removeAttr('disabled'); 

Answer 5

Simplemente basta con utilizar:

var update_pizza = function() { 
    $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked')); 
}; 

update_pizza(); 
$("#pizza").change(update_pizza); 

DEMO

Answer 6

Su select no tiene una identificación, solamente un nombre.Tendrá que modificar el selector:

$("#pizza").on("click", function(){ 
    $("select[name='pizza_kind']").prop("disabled", !this.checked); 
}); 

Demostración: http://jsbin.com/imokuj/2/edit

Answer 7

lo siento por responder en el hilo de edad, pero puede mi código ayuda a otros en future.i fue en mismo escenario que cuando se comprobará casilla de verificación a continuación, algunos campos de entradas seleccionados se habilitarán de otra manera deshabilitados.

$("[id*='chkAddressChange']").click(function() { 
    var checked = $(this).is(':checked'); 
    if (checked) { 
     $('.DisabledInputs').removeAttr('disabled'); 
    } else { 
     $('.DisabledInputs').attr('disabled', 'disabled'); 
    } 
}); 

Answer 8

discapacitados es un Boolean Attribute del select element según lo declarado por WHATWG, eso significa que la manera correcta para inhabilitar la con jQuery sería

jQuery("#selectId").attr('disabled',true); 

Esto haría este código HTML

<select id="selectId" name="gender" disabled="disabled"> 
    <option value="-1">--Select a Gender--</option> 
    <option value="0">Male</option> 
    <option value="1">Female</option> 
</select> 

Esto funciona tanto para XHTML and HTML (W3School reference)

Sin embargo, también se puede hacer utilizando como propiedad

jQuery("#selectId").prop('disabled', 'disabled'); 

conseguir

<select id="selectId" name="gender" disabled> 

Lo que sólo funciona para HTML y no XTML

NOTA: Un elemento discapacitado no será enviado con el formulario como se responde en esta pregunta: The disabled form element is not submitted

NOTA2: Un elemento desactivado puede aparecer atenuado.

NOTA 3:

un control de formulario que se debe evitar cualquier deshabilitado eventos de clic que están en cola en el origen de la tarea interacción del usuario que se distribuya en el elemento.

TL; DR

<script> 
    var update_pizza = function() { 
     if ($("#pizza").is(":checked")) { 
      $('#pizza_kind').attr('disabled', false); 
     } else { 
      $('#pizza_kind').attr('disabled', true); 
     } 
    }; 
    $(update_pizza); 
    $("#pizza").change(update_pizza); 
</script>