Estou tentando fazer o seguinte: o usuário digita o cep dele, e então é preenchido automaticamente, estado
(select) cidade
(select), rua
(input) e bairro
(input), quando o usuário digita seu cep e por exemplo é um cep completo (Cidade, Estado, Rua e Bairro) os campos eram desabilitados para edição utilizando Disable
. Quando o cep é somente da Cidade (Cidade e estado) os campos Bairro e rua ficam habilitados para digitar. Para isto estava usando este script:
$("#ZipCode").change(function () {
var zipCodeValue = $(ZipCode).val();
var url = '@Url.Action("ReturnZipCode", "Ajax")';
$.ajax({
type: 'POST',
url: url,
data: { zipCode: zipCodeValue },
dataType: 'json',
success: function (data) {
document.getElementById("City").disabled = true;
document.getElementById("State").disabled = true;
$('#State').val(data.StateID).change();
setTimeout(setCity, 1000);
function setCity() {//insere a cidade após 3 segundos
$('#City').val(data.CityID).change();
$('#CityID').val($('#City').val());
}
if (data.AddressName != "") {
document.getElementById("Address").disabled = true;
$('#Address').val(data.AddressName);
} else {
document.getElementById("Address").disabled = false;
$('#Address').val("");
}
if (data.Neighborhood != "") {
document.getElementById("Neighborhood").disabled = true;
$('#Neighborhood').val(data.Neighborhood);
} else {
document.getElementById("Neighborhood").disabled = false;
$('#Neighborhood').val("");
}
},
error: function (data) {
alert('Error' + data);
}
});
});
Com a ajuda de Lucas Costa e Gabriel Falieri alterei de Desable para readOnly, e parcialmente foi resolvido, como pode ver no código:
$("#ZipCode").change(function () {
var zipCodeValue = $(ZipCode).val();
var url = '@Url.Action("ReturnZipCode", "Ajax")';
$.ajax({
type: 'POST',
url: url,
data: { zipCode: zipCodeValue },
dataType: 'json',
success: function (data) {
document.getElementById("City").readOnly = true;
document.getElementById("State").readOnly = true;
$('#State').val(data.StateID).change();
setTimeout(setCity, 1000);
function setCity() {//insere a cidade após 3 segundos
$('#City').val(data.CityID).change();
$('#CityID').val($('#City').val());
}
if (data.AddressName != "") {
document.getElementById("Address").readOnly = true;
$('#Address').val(data.AddressName);
} else {
document.getElementById("Address").readOnly = false;
$('#Address').val("");
}
if (data.Neighborhood != "") {
document.getElementById("Neighborhood").readOnly = true;
$('#Neighborhood').val(data.Neighborhood);
} else {
document.getElementById("Neighborhood").readOnly = false;
$('#Neighborhood').val("");
}
},
error: function (data) {
alert('Error' + data);
}
});
});
Porém nos dropdown (Cidade e Estado) ainda fica permitindo a alteração. Para o tipo select ele não funciona, existe outra opção?
readonly
ao invés dedisabled
$('#selectID').prop('disabled',true);
apenas troque oselectID
pelo ID do select que deve ser desativado.