title: How to gray out HTML form inputs?
body: <p>What is the best way to gray out text inputs on an HTML form?  I need the inputs to be grayed out when a user checks a check box.  Do I have to use JavaScript for this (not very familiar with JavaScript) or can I use PHP (which I am more familiar with)?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>After some reading I have got a little bit of code, but it is giving me problems.  For some reason I cannot get my script to work based on the state of the form input (enabled or disabled) or the state of my checkbox (checked or unchecked), but my script works fine when I base it on the values of the form inputs.  I have written my code exactly like several examples online (mainly <a href="http://www.javascriptkit.com/javatutors/deform3.shtml" rel="nofollow noreferrer">this one</a>) but to no avail.  None of the stuff that is commented out will work.  What am I doing wrong here?</p>
  
  <pre><code>&lt;label&gt;Mailing address same as residental address&lt;/label&gt;
  &lt;input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;script type="text/javascript"&gt;
  
      function disable_enable(){
  
          if (document.form.mail_street_address.value==1)
              document.form.mail_street_address.value=0;
              //document.form.mail_street_address.disabled=true;
              //document.form.mail_city.disabled=true;
              //document.form.mail_state.disabled=true;
              //document.form.mail_zip.disabled=true;
  
          else
              document.form.mail_street_address.value=1;
              //document.form.mail_street.disabled=false;
              //document.form.mail_city.disabled=false;
              //document.form.mail_state.disabled=false;
              //document.form.mail_zip.disabled=false;
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is some updated code based upon what @Chief17 suggested.  Best I can tell none of this is working.  I am using <code>value</code> as a test because it works for some reason</p>
  
  <pre><code>            &lt;label&gt;Mailing address same as residental address&lt;/label&gt;
          &lt;input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/&gt;&lt;br/&gt;&lt;br/&gt;
  
          &lt;script type="text/javascript"&gt;
  
              function disable_enable(){
  
                  if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
                      document.form.mail_street_address.value=0;
                      //document.getElementById("mail_street_address").removeAttribute("disabled");
                      //document.getElementById("mail_city").removeAttribute("disabled");
                      //document.getElementById("mail_state").removeAttribute("disabled");
                      //document.getElementById("mail_zip").removeAttribute("disabled");
  
                  else
                      document.form.mail_street_address.value=1;
                      //document.getElementById("mail_street_address").setAttribute("disabled","disabled");
                      //document.getElementById("mail_city").setAttribute("disabled","disabled");
                      //document.getElementById("mail_state").setAttribute("disabled","disabled");
                      //document.getElementById("mail_zip").setAttribute("disabled","disabled");
              }
  
          &lt;/script&gt;
  </code></pre>