/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Disable/Enable checkboxes based on dropdown selection

I have searched and found lots on enabling/disabling form inputs, but nothing that matches my needs.

So here is my attempt, which isn’t working. Please help find where I’ve gone wrong and why it isn’t working. Thanks for taking a look.

I have a form with a dropdown with values 0-4. If value 0 is selected I want the checkboxes to be disabled. If value 1-4 is selected I want the checkboxes to be enabled.

[code]
<html>
<head><title>Disable with Dropdown Test</title>
<script>
function num_check(sel,cb) {
var aryVals = new Array(‘1′,’2′,’3′,’4’);
var makeDisabled = true;
for ( var i = 0; i < aryVals.length; i++) {
if( sel.options[sel.selectedIndex].value == aryVals[i])
makeDisabled = false;
}
cb.disabled = makeDisabled;
}
</script>

</head>

<body>
<form name=”form1″>
<div>
<p>Across Catgories:</p>
<div class=”top_space”>
<p>Remove <select name=”num” id=”num” class=”drop_down” onchange=”num_check(this,this.form1.list);”>
<option value=”0″>0</option>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
<option value=”4″>4</option>
</select> items from these Categories:</p>
<input type=”checkbox” id=”cat1″ name=”list” value=”1″ /><label for=”cat1″>Summative</label><br />
<input type=”checkbox” id=”cat2″ name=”list” value=”2″ /><label for=”cat2″>Formative</label><br />
<input type=”checkbox” id=”cat3″ name=”list” value=”3″ /><label for=”cat3″>Homework</label><br />
<input type=”checkbox” id=”cat4″ name=”list” value=”4″ /><label for=”cat4″>Classwork</label><br />
</div>
</div>
</form>

</body>
</html>
[/code]

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@tirnaJan 14.2011 — [CODE]
<html>
<head><title>Disable with Dropdown Test</title>
<script type="text/javascript">
function num_check(val) {
var status = (val == 0)? true : false;
for(i=0; i < chkBoxes.length; i++) {
chkBoxes[i].checked = false;
chkBoxes[i].disabled = status;
}
}
window.onload=function(){
chkBoxes = document.getElementById('top_space').getElementsByTagName('input');
num_check(0);
}
</script>
</head>
<body>
<form name="form1">
<div>
<p>Across Catgories:</p>
<div class="top_space" id="top_space">
<p>Remove <select name="num" id="num" class="drop_down" onchange="num_check(this.value);">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select> items from these Categories:</p>
<input type="checkbox" id="cat1" name="list" value="1" /><label for="cat1">Summative</label><br />
<input type="checkbox" id="cat2" name="list" value="2" /><label for="cat2">Formative</label><br />
<input type="checkbox" id="cat3" name="list" value="3" /><label for="cat3">Homework</label><br />
<input type="checkbox" id="cat4" name="list" value="4" /><label for="cat4">Classwork</label><br />
</div>
</div>
</form>
</body>
</html>
[/CODE]
Copy linkTweet thisAlerts:
@bftrs2authorJan 17.2011 — Thanks tirna, this is awesome. However, I'm placing this script on a page with more code and it links an external js library file that uses window.onload too so am getting a conflict. Is there a way to create the chkBoxes variable without using window.onload?
Copy linkTweet thisAlerts:
@bftrs2authorJan 17.2011 — Well, more specifically, not creating the variable but setting the num_check(0) without window.onload? Is there another way to do that?
Copy linkTweet thisAlerts:
@bftrs2authorJan 17.2011 — I'm trying onFocus instead of onload but that's not working either. I don't think any of the other window event handlers are applicable. So any ideas on how to set the num_check to 0 would be awesome.
Copy linkTweet thisAlerts:
@tirnaJan 18.2011 — Thanks tirna, this is awesome. However, I'm placing this script on a page with more code and it links an external js library file that uses window.onload too so am getting a conflict. Is there a way to create the chkBoxes variable without using window.onload?[/quote]

Putting the onload code I posted in the onload function in your external js file's onload should fix the problem.
Copy linkTweet thisAlerts:
@thraddashJan 18.2011 — Here is another way to do it, with the onload event properly attached...

[code=html]<html>
<head>
<title>Disable with Dropdown Test</title>
<script type="text/javascript">
function num_check(sel, cb)
{
for (var i = 0; i < cb.length; i++) {
cb[i].disabled = (sel.value == 0);
}
}
window[window.attachEvent ? 'attachEvent' : 'addEventListener']((window.attachEvent ? 'on' : '') + 'load', function(){document.form1.num.onchange();}, false);
</script>
</head>
<body>
<form name="form1">
<div>
<p>Across Catgories:</p>
<div class="top_space">
<p>
Remove
<select name="num" id="num" class="drop_down" onchange="num_check(this, this.form.list);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
items from these Categories:
</p>
<input type="checkbox" id="cat1" name="list" value="1" /><label for="cat1">Summative</label><br />
<input type="checkbox" id="cat2" name="list" value="2" /><label for="cat2">Formative</label><br />
<input type="checkbox" id="cat3" name="list" value="3" /><label for="cat3">Homework</label><br />
<input type="checkbox" id="cat4" name="list" value="4" /><label for="cat4">Classwork</label><br />
</div>
</div>
</form>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@tirnaJan 18.2011 — Here is another way to do it, with the onload event properly attached...
[/quote]


I have never had any problems with window.onload so I will stick with using it.
Copy linkTweet thisAlerts:
@thraddashJan 18.2011 — I have never had any problems with window.onload so I will stick with using it.[/QUOTE]

LOL, I was waiting all day for that.

I don't expect you to change, just do what makes you happy.
Copy linkTweet thisAlerts:
@tirnaJan 18.2011 — LOL, I was waiting all day for that.

I don't expect you to change, just do what makes you happy.[/quote]


no problem - I always do ?
Copy linkTweet thisAlerts:
@bftrs2authorJan 31.2011 — Thanks for the suggestions! I'll give them both a try.
Copy linkTweet thisAlerts:
@bftrs2authorMar 28.2011 — Actually I was able to get it to work both ways. Thanks again for your help!
×

Success!

Help @bftrs2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...