• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 259
  • Last Modified:

Javascript Toggle Visability

Hello,

I'm attempting to build a javascript rule that I can use on many checkboxes to disable / enable textfields / checkboxes etc..

What I have so far is -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script  type='text/javascript'>
function toggle_disability(id)
{
var e = document.getElementById(id);	
if (document.getElementById(id).disabled = true)
document.getElementById(id).disabled  = false;
if (document.getElementById(id).disabled = false)
document.getElementById(id).disabled  = true;
}
</script>
</head>

<body>
<form action="" method="get">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox" onClick="toggle_disability('textfield')" />
  </p>
  <p>
    <input type="text" name="textfield" id="textfield" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox2" id="checkbox2" onClick="toggle_disability('textfield2')" />
  </p>
  <p>
    <input type="text" name="textfield2" id="textfield2" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox3" onClick="toggle_disability('checkbox4')" />
  </p>
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4" disabled="disabled" />
  </p>
</form>
</body>
</html>

Open in new window


And currenly checking a box to enable disabled input elements works fine.. however if I change my mind and want to disable the element, re clicking the checkbox does nothing....

my javascript is -

<script  type='text/javascript'>
function toggle_disability(id)
{
var e = document.getElementById(id);	
if (document.getElementById(id).disabled = true)
document.getElementById(id).disabled  = false;
if (document.getElementById(id).disabled = false)
document.getElementById(id).disabled  = true;
}
</script>

Open in new window


Any help - much appreciated -

Thank you
0
garethtnash
Asked:
garethtnash
  • 2
  • 2
  • 2
2 Solutions
 
Kiran SonawaneProject LeadCommented:
Use this function
You missed ==.
function toggle_disability(id)
{

if (document.getElementById(id).disabled == true)
  document.getElementById(id).disabled  = false;
else
  document.getElementById(id).disabled  = true;

}

Open in new window

0
 
Pratima PharandeCommented:
try this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script  type='text/javascript'>
function toggle_disability(id , chk)
{
if ( chk.checked == true)
document.getElementById(id).disabled  = false;
if ( chk.checked == false)
document.getElementById(id).disabled  = true;
}
</script>
</head>

<body>
<form action="" method="get" ID="Form1">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox" onClick="toggle_disability('textfield',this)" />
  </p>
  <p>
    <input type="text" name="textfield" id="textfield" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox2" id="checkbox2" onClick="toggle_disability('textfield2',this)" />
  </p>
  <p>
    <input type="text" name="textfield2" id="textfield2" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox3" onClick="toggle_disability('checkbox4',this)" />
  </p>
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4" disabled="disabled" />
  </p>
</form>
</body>
</html>

Open in new window

0
 
garethtnashAuthor Commented:
Hi Pratima,

That works nicely, except I need it to work both ways, so if a textfield isn't disabled..

the code below as an example, doesn't work (I've just removed disabled from the first textfield -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script  type='text/javascript'>
function toggle_disability(id , chk)
{
if ( chk.checked == true)
document.getElementById(id).disabled  = false;
if ( chk.checked == false)
document.getElementById(id).disabled  = true;
}
</script>
</head>

<body>
<form action="" method="get" ID="Form1">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox" onClick="toggle_disability('textfield',this)" />
  </p>
  <p>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>
    <input type="checkbox" name="checkbox2" id="checkbox2" onClick="toggle_disability('textfield2',this)" />
  </p>
  <p>
    <input type="text" name="textfield2" id="textfield2" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox3" onClick="toggle_disability('checkbox4',this)" />
  </p>
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4" disabled="disabled" />
  </p>
</form>
</body>
</html>

Open in new window


Thanks for your help :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Pratima PharandeCommented:
try this

send thir parameter with default status
means if disabled send false else true
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script  type='text/javascript'>
function toggle_disability(id , chk , status)
{
if ( chk.checked == true  )
document.getElementById(id).disabled  = status;
else
{

 if ( status == true)
   document.getElementById(id).disabled  = false;
   else
   document.getElementById(id).disabled  = true;
}
}
</script>
</head>

<body>
<form action="" method="get" ID="Form1">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox" onClick="toggle_disability('textfield',this , true)" />
  </p>
  <p>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>
    <input type="checkbox" name="checkbox2" id="checkbox2" onClick="toggle_disability('textfield2',this,false)" />
  </p>
  <p>
    <input type="text" name="textfield2" id="textfield2" disabled="disabled" />
  </p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox3" onClick="toggle_disability('checkbox4',this,true)" />
  </p>
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4"  />
  </p>
</form>
</body>
</html>

Open in new window

0
 
Kiran SonawaneProject LeadCommented:
OR you can try this

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script  type='text/javascript'>
  $(document).ready(function(){
    $("#checkbox, #checkbox2, #checkbox3").click(function(){
      toggle_disability(this);
    });
    
   $("input[id^=checkbox]").each(function(){
     if($(this).is(':checked'))
        $("#" + $(this).attr("data-fld")).attr('disabled',false);
      else
       $("#" + $(this).attr("data-fld")).attr('disabled',true);
      
   });
    
  });
  
  function toggle_disability(obj)
  {
    obj.checked ?  $("#" + $(obj).attr("data-fld")).attr('disabled',false) : $("#" + $(obj).attr("data-fld")).attr('disabled',true);
  }
 

</script>
</head>

<body>
<form action="" method="get" ID="Form1">
  <p>
    <input type="checkbox" name="checkbox" id="checkbox"  data-fld="textfield" />
  </p>
  <p>
    <input type="text" name="textfield" id="textfield" />
  </p>
  <p>
    <input type="checkbox" name="checkbox2" id="checkbox2"  data-fld="textfield2" />
  </p>
  <p>
    <input type="text" name="textfield2" id="textfield2" />
  </p>
  <p>
    <input type="checkbox" name="checkbox3" id="checkbox3" data-fld="checkbox4" />
  </p>
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4"  />
  </p>
</form>
</body>
</html>

Open in new window

0
 
garethtnashAuthor Commented:
Those are both Great - thank you both :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now