Abilita/Disabilita ingresso basato sulla selezione (jQuery)

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); 
    } 
}); 

non sembra funzionare. Devo fare qualcosa di sbagliato.

Answer 1

È necessario utilizzare .removeAttr('disabled') anziché .attr('disabled', false). Inoltre dovresti cache your jQuery selectors.

Modifica: Pensato a questo dopo il fatto. Si consiglia di "svuotare" il testo che è stato digitato nel campo se lo si disabilita, quindi ho aggiunto uno .val(''), se si voleva anche nasconderlo, è possibile aggiungere .hide() e .show() ai due casi.

ho messo insieme this fiddle visualizzare la versione di lavoro:

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 

Il .trigger('change') sarà "trigger" un evento di modifica, in esecuzione in modo efficace la funzione di una volta, mentre si legano esso. In questo modo, #province sarà disabilitato/abilitato in base allo stato selezionato al momento dell'esecuzione del codice. Senza di esso, la provincia sarebbe stata disponibile anche se lo stato non fosse "altro" a meno che non si aggiungesse anche disabled='disabled' al tag <input> nel proprio html.

Answer 2

È necessario impostare "disabilitato" su true per disabilitare effettivamente qualcosa. Ad esempio, se si desidera disabilitare su "Altro" e attivare su tutto il resto, allora vi consiglio di dire:

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

Questo utilizza $("#province").val() che è generalmente il modo migliore per ottenere il valore corrente dell'opzione selezionata da un menu a discesa in jQuery. L'attributo "disabled" è impostato su true se il valore è "altro" e falso in caso contrario.