Avoid editing in the field

Question

I am trying to do the following: the user type his zip code, and then it is filled automatically, estado(select) cidade(select), rua(input) and bairro(input), when the user enters his zip code and for example is a complete zip (City, State, Street and Neighborhood) the fields were disabled for editing using Disable. When the zip code is only of the City (City and state) the fields Neighborhood and street are enabled to type. For this was using this 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);
        }
    });
});

With the help of Lucas Costa and Gabriel Falieri I changed from Desable to readonly, and it was partially resolved, as you can see in the code:

$("#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);
        }
    });
});

But in the dropdown (City and State) still allows the change. For the select type it does not work, there is another option?

Answer 1

By default, the disabled is not sent to the form. I believe the solution is to make a readonly same as mentioned above.

Answer 2

An input with the "disabled" property is not sent together with the other fields when the form is sent. If your goal is to prevent the user from interacting with the field it is best to use the readonly property.

If you are using HTML you do so:

<input type="text" readonly>

If you are using XHTML you do so:

<input type="text" readonly="readonly" /> 

If your problem is setting this property with javascript you can use jQuery:

$("#State").prop("readonly", true); // Para permitir defina como false

Because it is a property the way to get it should be through the HTML object + the name of the property, but in the case of Select the browsers still have problems with it. If you prefer to follow with pure javascript do so to set your select:

document.getElementById("State").setAttribute("readonly", true);

And so to remove:

document.getElementById("State").removeAttribute("readonly");

If not a select, use the appropriate method:

document.getElementById("City").readOnly = true;

One day all browsers will solve this problem and you may have to come back in this implementation to solve the same problem. That’s why I recommend you use the example with jQuery that already has a polyfill for this. Otherwise you yourself would have to implement a polyfill at this time.

Answer 3

To disable select, you can use the following code:

$('#selectID').prop('disabled',true);

To re-activate it, simply remove the property disabled:

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

Just change the selectID by the ID of the select to be disabled.