disabling controls via checkbox in javascript

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

Is your problem the fact that you're quoting your tb1 argument? — Ruan Mendes
– Ruan Mendes, Commented Jan 17, 2012 at 19:10
Show your errors. You're not describing what is not working. Even better create a jsfiddle.net and post it here — Ruan Mendes
– Ruan Mendes, Commented Jan 17, 2012 at 19:27
When the checkbox is checked, the textboxes and fildropdownlist are still enabled. — bluesky
– bluesky, Commented Jan 17, 2012 at 19:32
Is there an error on the console? Read my answer, I'm pretty sure you'll find the problem reading my suggestions and the code I posted on jsfiddle.net/mendesjuan/7ZEvk/2 — Ruan Mendes
– Ruan Mendes, Commented Jan 17, 2012 at 19:40

Ruan Mendes · Accepted Answer · 2012-01-17 19:44:27Z

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

edited Jan 17, 2012 at 19:44

answered Jan 17, 2012 at 19:24

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

2 Comments

bluesky Over a year ago

What i was referencing were not the same.

Ruan Mendes Over a year ago

@MasterP: Huh? What's not the same as what?

Diodeus - James MacFarlane · Accepted Answer · 2012-01-17 19:03:23Z

1

Try:

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

edited Jan 17, 2012 at 19:03

answered Jan 17, 2012 at 18:52

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

6 Comments

Diodeus - James MacFarlane Over a year ago

See: stackoverflow.com/questions/1558485/…

Ruan Mendes Over a year ago

The disabled property takes true or false. The HTML attribute takes the string. I've never had a problem with setting disabled = true or false developer.mozilla.org/en/DOM/HTMLInputElement

Diodeus - James MacFarlane Over a year ago

Personally, I'd use jQuery and set the attribute: $(tb1).attr('disabled','disabled').

Ruan Mendes Over a year ago

You can use whatever you'd like. But you need to tell us why.

Diodeus - James MacFarlane Over a year ago

disabled='disabled' is needed to make valid XHTML. <input disabled> is not valid, but <input disabled='disabled'> is.

|

Ibu · Accepted Answer · 2012-01-17 18:51:46Z

0

use the disabled property:

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

answered Jan 17, 2012 at 18:51

Ibu

44k14 gold badges82 silver badges109 bronze badges

Comments

dku.rajkumar · Accepted Answer · 2012-01-17 19:05:09Z

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

Collectives™ on Stack Overflow

disabling controls via checkbox in javascript

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related