CODEWITHSUNDEEP
javascripthtml
Laya302
Laya302

Reputation: 77

Trouble disabling a text field based on dropdown selection (JavaScript)

I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option from the menu should enable the text field.

I did some research and found many similar problems, however none of the solutions seem to be working. I tried a very simple code on jsfiddle to see if it's the solution itself that's the problem, or my code in particular.. My original code did not work, and neither did the simplified version. Here is the simplified code sample:

HTML:

<select id="menu" onChange="checkOption()">
    <option value="A">Option A</option>
    <option value="B">Option B</option>
    <option value="C">Option C</option>
    <option value="D">Option D</option>
</select>
<input type="text" id="input" disabled>

JavaScript:

function checkOption() {
    if(document.getElementById("menu").value != "A") {
        document.getElementById("input").disable = 'false';
    }
    else {
        document.getElementById("input").disable = 'true';
    }
}

The text box remains disabled no matter what I click. I tried removing the default disable, and still no luck. I also tried various other solutions, however this was the most straightforward which is why I don't understand why it's not working.

It's probably something really obvious that I'm not seeing... I'm very very new at this, so if anyone would care to shed some light on my problem, I would be very grateful.

Upvotes: 1

Views: 5467

Answers (1)

tymeJV
tymeJV

Reputation: 104795

It's disabled not disable

document.getElementById("input").disabled = true;

You can also clean the code up by passing this into your handler and referencing that (also no need for the if, else - just disable based on a condition directly:

<select id="menu" onChange="checkOption(this)">

function checkOption(obj) {
    var input = document.getElementById("input");
    input.disabled = obj.value == "A";
}

Aaaaand a fiddle: http://jsfiddle.net/23EpC/

Upvotes: 3

Related Questions