Re: OT: TECH: JavaScript help
| From: | Mark J. Reed <markjreed@...> |
|---|
| Date: | Tuesday, April 8, 2008, 13:01 |
|---|
On Tue, Apr 8, 2008 at 8:38 AM, Benct Philip Jonsson <bpj@...> wrote:
> I need help with some JavaScript. In a form I need to
> disable a select list foo if a checkbox baz is checked.
If you mean 'disable' in the technical sense of greying out, the below
does the trick. If you want to get fancier (make it disappear
entirely, etc) you'll need to change what the function does.
Basic page:
<html>
<head><title>My Form</title><script src="myscript.js"></script></head>
<body><form>
<label for="foo">Foo:</label>
<select name="foo" id="foo">
<option>yip</option><option>yipe</option><option>yippee</option>
<option>kai-ay</option><option>(unprintable)</option>
</select>
<input type="checkbox" id="baz" name="baz" value="baz" />
<label for="baz">Baz?</label>
</form>
</body>
</html>
Then in myscript.js, you do this:
(function() {
window.onload = function() {
var baz = document.getElementById("baz");
if (baz) {
baz.onclick = function() {
var foo = document.getElementById("foo");
if (foo) {
foo.disabled = baz.checked;
}
}
}
}
})();
There are other ways of accomplishing the same result; the way I do it
above with the anonymous functions and no JS at all in the actual
HTML, not even an onclick="blah" attribute, is typical of "unobtrusive
Javascript", which is all the rage these days.
--
Mark J. Reed <markjreed@...>