• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • 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
 
sonawanekiranCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
sonawanekiranCommented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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