SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simplifying disabled checkboxes code

    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 is possible 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!

    Code:
    <!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>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Wouldn't it be easier to use radio buttons for this?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    UK
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point.

    Here is a better example

    Code:
    <!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.check3.disabled = true; }
    else
      { document.form1.check3.disabled = false; }
    }
    function Switch2()
    {
    if (document.form1.check3.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"/>
    <input type="checkbox" name="check3" onClick="Switch2()"/>
    </form>
    </body>
    </html>

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That should be

    <script type="text/javascript">

    the language attribute is long gone.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a possibility

    I think this is what you were looking for. It is still only saving two lines of JS at four lines versus your six.

    Your original page is used but with some changes to make it validate as xhtml. Also there is some preachy markup about radio buttons and checkboxes. You asked about practices and I just couldn't resist!

    Code:
    <!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>Check Boxes Script</title>
      <style type="text/css">
      	body {
      		color: #333;
      		font-size: small;
      	}
      	fieldset {
      		margin: 1em;
      		width: 500px;
      		background-color: #cef;
      	}
      	legend {font-weight: bold;
      		font-size: 1.1em;
      		}
      </style>
    
      <script type="text/javascript"> 
      	function switchBox() {
      		boxOne = document.getElementById("check1");
      		boxTwo = document.getElementById("check2");
      
      		boxTwo.disabled = boxOne.checked;
      		boxOne.disabled = boxTwo.checked;
      	}				// function switchBox()
      </script> 
    </head>
    
    <body>
    
    <h1>Check Boxes Script</h1>
    <ol>
    <li>If embedding JavaScript in the xhtml, use lowercase event handler names.  So &quot;onclick&quot; and not &quot;onClick&quot;.</li>
    <li>Like felgall says, radio buttons will behave exactly like your original description without any scripting.  It's better to use the radio buttons rather than scripting checkboxes to behave differently.</li>
    </ol>
    
    <form action="#" method="post" name="form1">
    <fieldset><legend>Scripted Checkboxes</legend>
    <p>Check off only one.  However, without JavaScript enabled, your user will just have a normal set of checkboxes.  That might be confusing.</p>
    <p>
    <input type="checkbox" id="check1" onclick="switchBox()" />
    <input type="checkbox" id="check2" onclick="switchBox()" />
    </p>
    </fieldset>
    
    <fieldset><legend>Unscripted Radio Buttons</legend>
    <p>Check off only one.  Normal Radio Box behaviour.  This does not depend on JavaScript.</p>
    <p>
    <input type="radio" name="radio1" />
    <input type="radio" name="radio1" />
    </p>
    </fieldset>
    
    <fieldset><legend>Unscripted Checkboxes</legend>
    <p>Check off one or more.  Normal Checkbox behaviour.</p>
    <p>
    <input type="checkbox" name="unscriptedcheck1" />
    <input type="checkbox" name="unscriptedcheck2" />
    </p>
    </fieldset>
    
    </form>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •