Question

I currently have 4 textboxes, 1 checkbox and a dropdownlist. I am attempting to disable the textboexes and dropdownlist upon
the checkbox being checked. My current code does not work, but I can’t seem to find the error in it. I am new to using JavaScript.

function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4)
{
    if (document.getElementById(phyAddressCheckBox).checked) 
{
document.getElementById('tb1').enabled = true;
document.getElementById(tb2).enabled = true;
document.getElementById(tb3).enabled = true;
document.getElementById(file1).enabled = true;
document.getElementById(tb4).enabled = true;
}
else
{
document.getElementById(tb1).enabled = false;
document.getElementById(tb2).enabled = false
document.getElementById(tb3).enabled = false;
document.getElementById(file1).enabled = false;
document.getElementById(tb4).enabled = false;
}
}

edit
I set all property to disabled on both conditions and nothing works.

<script type="text/javascript" language="javascript">
function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4)
{
    if (document.getElementById(phyAddressCheckBox).checked) 
{
    document.getElementById('tb1').disabled = 'disabled';
document.getElementById(tb2).disabled = 'disabled';
document.getElementById(tb3).disabled = 'disabled';
document.getElementById(file1).disabled = 'disabled';
document.getElementById(tb4).disabled = 'disabled';
}
else
{
document.getElementById(tb1).disabled = 'disabled';
document.getElementById(tb2).disabled = 'disabled';
document.getElementById(tb3).disabled = 'disabled';
document.getElementById(file1).disabled = 'disabled';
document.getElementById(tb4).disabled = 'disabled';
}
}
</script>

I also added in the control code.

<asp:CheckBox ID="phyAddressCheckBox" runat="server"  onclick="enableCheckBox(this.ID, physicalAddressTextbox, PhysicalAddress2Textbox, CityTextbox, physicalStateDropDownList,physicalZipTextbox)" style="text-align: left" />

Answer 1

I disagree with the people telling you to use disabled='disabled' The disabled property on input elements takes a boolean, unlike the HTML attribute. https://developer.mozilla.org/en/DOM/HTMLInputElement

From the names of the variables you’re passing into enableCheckBox, it looks like you’re passing DOM nodes instead of ids.

Another problem is that you’re passing this.ID, you should be passing this.id. Even better, just pass the element itself. See this example http://jsfiddle.net/mendesjuan/7ZEvk/2/

The last problem (in initial example) was that you were trying to set an enabled property, but that doesn’t exist. You have to set the disabled property.

HTML

<input type='checkbox' id='cbox' onclick="enableCheckBox(this, 'text1', 'text2', 'text3', 'sel');"/>

<input id='text1' />
<input id='text2' />
<input id='text3' />
<select id='sel'>
    <option>hello</option>
</select>

JavaScript

// This is a lot like your function, but is less repetitive
function enableCheckBox(cbox /*, ... ids of fields to enable/disable */){    
    for (var i = 1; i < arguments.length; i++) {
        document.getElementById(arguments[i]).disabled = cbox.checked;
    }
}