CODEWITHSUNDEEP
javascripthtml
TDU
TDU

Reputation: 117

Can't disable a select field using Javascript

Been banging my head against the wall for several hours, but I'm just having a problem disabling a select field. I'd like to know - but Javascript answers only. Sorry, this project does not use jquery.

Code has been shortened and a bit abbreviated...

Overall, here is the HTML:

<form>
.
.  Code below triggers the enable/disable
<td>
    <fieldset name="GM" id="GM" onchange="grpChg();">
        <legend>Select One:</legend>
        <input name="GM" id="GM1" type="radio" value="1"/>Opt1<br />
        <input name="GM" id="GM2" type="radio" value="2"/>Opt2<br />
        <input name="GM" id="GM3" type="radio" value="3"/>Opt3<br />
        <input name="GM" id="GM4" type="radio" value="4"/>Opt4<br />                
    </fieldset> 
</td>
.
.
.  This is the section that should be enabled/disabled:
<table>
    <tr>
        <td>
            <strong>Section 1<br /></strong>
            Option 1<br />
        </td>
        <td>
            <select name="Opt1_Enroll" id="Opt1_Enroll">
                <option value=""></option>
                <option value="1">Yes</option>          
                <option value="2">No</option></select>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <strong>Section 2<br /></strong>
            Option 2
        </td>
        <td>
            <select name="Opt2_Enroll" id="Opt2_Enroll">
                <option value=""></option>
                <option value="1">Yes</option>          
                <option value="2">No</option></select>
            </select>           
        </td>
    </tr>
</table>
.
.
.
</form>

Now the javascript function:

function grpChg() {
    var tt = document.getElementsByName('GM');

    var enrollValue = 0;
    for (var i = 0; i < tt.length; i++) {           ;
        if (tt[i].type === "radio" && tt[i].checked) {          
            enrollValue = tt[i].value;
        }
    }   

    if (enrollValue == "2") {   
alert("Opt2");
        document.getElementById("Opt1_Enroll").disable = true;
        document.getElementById("Opt2_Enroll").disable = false;     
    } else {
alert("NOT Opt2");              
        document.getElementById("Opt1_Enroll").disable = false;
        document.getElementById("Opt2_Enroll").disable = true;      
    }

}

The javascript function gets called just fine, and I get my alerts as expected. However - while no errors ensue (running firebug), I also don't get the select(s) disabled/enabled (i.e. Op1_Enroll or Opt2_Enroll).

Same type of javascript and HTML works fine for a couple of other selects - but not this one. Any ideas why?

Upvotes: 1

Views: 2440

Answers (1)

Pierrickouw
Pierrickouw

Reputation: 4704

You have a typo.

It should be disabled and not disable.

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

You can check here to see all available properties of your different HTML Inputs in JS.

Upvotes: 4

Related Questions