CODEWITHSUNDEEP
javascriptasp.net
bluesky
bluesky

Reputation: 646

disabling controls via checkbox in javascript

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" />

Upvotes: 3

Views: 3426

Answers (4)

Ruan Mendes
Ruan Mendes

Reputation: 92274

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;
    }
}

Upvotes: 1

dku.rajkumar
dku.rajkumar

Reputation: 18568

Make use of removeAttribute and setAttribute, when there is a disabled it is disabled else the element is enabled. you can do it like 

function enableCheckBox(phyAddressCheckBox, tb1, tb2, tb3, file1, tb4){
    if (document.getElementById(phyAddressCheckBox).checked){
       document.getElementById(tb1).removeAttribute("disabled");
       document.getElementById(tb2).removeAttribute("disabled");
       document.getElementById(tb3).removeAttribute("disabled");
       document.getElementById(file1).removeAttribute("disabled");
       document.getElementById(tb4).removeAttribute("disabled");
    }else{
       document.getElementById(tb1).setAttribute("disabled", "disabled");
       document.getElementById(tb2).setAttribute("disabled", "disabled");
       document.getElementById(tb3).setAttribute("disabled", "disabled");
       document.getElementById(file1).setAttribute("disabled", "disabled");
       document.getElementById(tb4).setAttribute("disabled", "disabled");
   }
}

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Try:

document.getElementById(tb1).disabled='disabled';

Upvotes: 1

Ibu
Ibu

Reputation: 43810

use the disabled property:

document.getElementById(tb1).disabled = 'disabled';

Upvotes: 0

Related Questions