Simplifying disabled checkboxes code

J

Joseph.Moffatt

Here is a simple webpage containing two checkboxes.

I have used javascript to diasble one checkbox when the other one is
selected.

At the moment it uses two seperate but identical functions, one for
each checkbox.

I am new to javascript so I don't know but I think it imay be good
practice to simplify this code so only a single funtion is required for
both checkboxes.

I would appreciate any suggestions how to do this and advice if it is
good practice and I would also be grateful for any general feedback on
good practice.

Thanks!

--------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script language="javascript">
function Switch1()
{
if (document.form1.check1.checked == true)
{ document.form1.check2.disabled = true; }
else
{ document.form1.check2.disabled = false; }
}
function Switch2()
{
if (document.form1.check2.checked == true)
{ document.form1.check1.disabled = true; }
else
{ document.form1.check1.disabled = false; }
}
</script>

</head>
<body>
<form method="post" name="form1">
<input type="checkbox" name="check1" onClick="Switch1()"/>
<input type="checkbox" name="check2" onClick="Switch2()"/>
</form>
</body>
</html>
 
R

RobG

Here is a simple webpage containing two checkboxes.

I have used javascript to diasble one checkbox when the other one is
selected.

The obvious question is why aren't you using radio buttons?

At the moment it uses two seperate but identical functions, one for
each checkbox.

I am new to javascript so I don't know but I think it imay be good
practice to simplify this code so only a single funtion is required for
both checkboxes.

I would appreciate any suggestions how to do this and advice if it is
good practice and I would also be grateful for any general feedback on
good practice.

Thanks!

--------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script language="javascript">

The language attribute is deprecated, type is required:

function Switch1()

JavaScript already has a 'switch' statement and hence switch is a
reserved word, so while your name isn't actually in conflict with that,
it's very close so use another name...

Try this example:

<script type="text/javascript">

function toggleCB(cb1, cb2){
cb1.disabled = cb2.checked;
cb2.disabled = cb1.checked;
}
</script>

<form action="">
<input type="checkbox" name="cb_01"
onclick="toggleCB(this, this.form.cb_02);">cb 01<br>
<input type="checkbox" name="cb_02"
onclick="toggleCB(this, this.form.cb_01);">cb 02<br>
</form>

[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Staff online

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top