Habilitar / Deshabilitar la Entrada en función de la selección (jQuery)

 Something Other   

jQuery

 $('#state').change(function () { if ($('#state Other:selected').text() == "Other"){ $('#province').attr('disabled', false); alert(1); } else { alert(2); } }); 

No parece funcionar Debo estar haciendo algo mal.

Debería utilizar .removeAttr('disabled') lugar de .attr('disabled', false) . También debe almacenar en caché sus selectores jQuery .

Editar: Pensé en esto después del hecho. Es posible que desee “vaciar” el texto que se ha escrito en el campo si lo está deshabilitando, así que agregué .val('') , si también deseaba ocultarlo, podría agregar .hide() y .show() a los dos casos.

Arreglé este violín para mostrarte una versión funcional:

 var $state = $('#state'), $province = $('#province'); $state.change(function () { if ($state.val() == 'other') { $province.removeAttr('disabled'); } else { $province.attr('disabled', 'disabled').val(''); } }).trigger('change'); // added trigger to calculate initial state 

El .trigger('change') activará un evento de cambio, ejecutando efectivamente la función una vez mientras lo vincula. De esta forma, la #province estará deshabilitada / habilitada en función del estado seleccionado en el momento en que se ejecuta el código. Sin él, la provincia estaría disponible incluso si el estado no es “otro” a menos que también haya agregado disabled='disabled' a la etiqueta en su html.

Debes establecer “disabled” en true para realmente desactivar algo. Por ejemplo, si desea deshabilitar en “Otro” y habilitar en todo lo demás, sugiero que diga:

 $('#state').change(function () { $("#province").attr("disabled", $("#state").val() == "other"); }); 

Esto usa $("#province").val() que generalmente es la forma preferida de obtener el valor actual de la opción seleccionada de un menú desplegable en jQuery. El atributo “deshabilitado” se establece en true si el valor es “otro” y falso en caso contrario.