Activar/Desactivar entrada basado en la selección (jQuery) no parece

Question

<select name="state" class="select" id="state"> 
    <option value="something">Something</option> 
    <option value="other">Other</option> 
</select> 

<input type="text" name="province" class="text" id="province" /> 

jQuery

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

a trabajar. Debo estar haciendo algo mal.

Answer 1

Debe usar .removeAttr('disabled') en lugar de .attr('disabled', false). También debe cache your jQuery selectors.

Edit: 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é un .val(''), si también deseaba ocultarlo, puede agregar .hide() y .show() a los dos casos.

junté this fiddle a mostrar una versión de trabajo:

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') va a "activar" un evento de cambio, funcionando con eficacia la función de una vez mientras enlazarlo. De esta forma, el #province se desactivará/habilitará según el estado seleccionado en el momento en que se ejecute el código. Sin él, la provincia habría estado disponible incluso si el estado no es "otro" a menos que también haya agregado disabled='disabled' a la etiqueta <input> en su html.

Answer 2

Debe establecer "disabled" en true para deshabilitar realmente algo. Por ejemplo, si desea desactivar el "Otro" y permitir en todo lo demás, entonces le sugiero que dice:

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

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