How do I disable input field when certain select list value is picked

Question

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.

My HTML: JSFiddle Link

My Javascript:

document.getElementById('BillingCountryCode').onchange = function () {
    if(this.value != '840') {
        document.getElementById("BillingStateProvince").disabled = true;
        document.getElementById("BillingStateProvince").style.display="none"
    } else {
        document.getElementById("BillingStateProvince").disabled = false;
        document.getElementById("BillingStateProvince").style.display="block"
    }
}

Answer 1

The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:

document.getElementById('BillingCountryCode').onchange = function () {
    if(this.value != '840') {
        document.getElementById("BillingStateProvince").disabled = true;
        document.getElementById("BillingStateProvince").style.display="none";
        document.getElementById("BillingStateProvince2").disabled = false;
        document.getElementById("BillingStateProvince2").style.display="block";
    }

    else {
        document.getElementById("BillingStateProvince").disabled = false;
        document.getElementById("BillingStateProvince").style.display="block";
        document.getElementById("BillingStateProvince2").disabled = true;
        document.getElementById("BillingStateProvince2").style.display="none";
    }
}