Can't disable a select field using Javascript

Question

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?

Don't ever feel you should apologise for not using jQuery, for many things it's becoming increasingly less 'necessary,' despite the inclinations of some of our users. :) — David Thomas
– David Thomas, Commented Mar 10, 2015 at 16:57
Well - like so many other things on the 'net these days, there seems to be a great polarization. You're an idiot if you use javascript, etc. jquery is nice, but the syntax is a tad atrocious, and I've got to leave this code to those who don't even know javascript that well. Can't say I'm an expert either, but I know about 500% more about it than my co-workers. So, I've got to think "legacy" here... — TDU
– TDU, Commented Mar 10, 2015 at 18:27

Pierrickouw · Accepted Answer · 2015-03-10 16:53:59Z

4

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.

answered Mar 10, 2015 at 16:53

Pierrickouw

4,7341 gold badge34 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TDU Over a year ago

Geez! What a dolt! I've only got "disabled" in there 70-80 other times, and never saw it. I apologize - I was blinded by all the table HTML. Yeah, that's it - that's my story and I'll stick with it until I die.

Pierrickouw Over a year ago

To prevent this in the future, just create a function to wrap it like disableInput(domInput). So there is only one place where you actually call disabled. Or even better, a toggleInput function :)

Collectives™ on Stack Overflow

Can't disable a select field using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related