Disable checkbox, until text is displayed

Question

I have this form, it works fine but I need the tos2 checkbox to be as disabled until the user clicks to show the TOS. Only then the user will be able to check the checkbox. If anyone can give me a hint go get this working, it will be great.

Thanks in advance.

<?php

?>
<!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=utf-8" />
<title>

</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">
    $().ready(function() {
        $("#form1").validate();
    });        
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
    });
</script>
<script type="text/javascript">
$(document).ready(function($) {
      $("input[name$='enable']").click(function(){
               if ($(this).is(':checked')) {
                            var remove = '';
                            $('input.textbox:text').attr ('value', remove);
                            $('input.textbox:text').attr("disabled", true);
                            $('input.textbox:checkbox').attr("disabled", true);

                 }
               else if ($(this).not(':checked')) {
                            $('input.textbox:checkbox').attr("disabled", false);
                            $('input.textbox:text').attr("disabled", false);
                  }
 }); });

function showHide() {
    var ele = document.getElementById("showHideDiv");
    if(ele.style.display == "block") {
            ele.style.display = "none";
      }
    else {
        ele.style.display = "block";
    }
}

</script>

</head>
<body>

<div id="content" align="center">

  <div id="wrapper" style="width:550px !important;">

        <form method="post" action="inserting-process.php" id="form1" onsubmit="return validateForm()" class="signupform" name="signupform">
      <input type="hidden" name="allowlang" id="allowlang" value="no" />



      <table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">  
              <tr>
              <td><input type="checkbox" name="enable" id="enable" value="" style="width:15px !important"/>
                &nbsp;
                The package has not been received.</td>
                </tr>
        <tr>
          <td><input type="checkbox" name="2enable" id="3enable" value="SI" style="width:15px !important"/>
            &nbsp;
            There has been an issue.</td>

        </tr>

      </table>
    <br />


      <table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">

        <tr>
          <td width="120px"><strong>Name:</strong></td>
          <td><input type="text" name="fname" id="fname" class="textbox required" size="30"/></td>
        </tr>  

      </table>
      <br />  

            <h4 align="left" style="padding-left:5px; color:#d40000;">TOS
            </h4>

        <div id="showHideDiv" style="display:none;">

              <p align="left" style="padding-left:5px;">
              Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service Some text here about terms of service
              </p>
              <br />
        </div>

      <table cellpadding="4" cellspacing="0" width="100%" border="0" style="text-align:left;">

        <tr>
          <td><input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important"  class="textbox required" />
            &nbsp;
            I agree with the <a href="javascript: ;" onclick="return showHide();"> TOS.</a></td>
        </tr>

        <tr>
          <td height="50"></td>
          <td> <br /><button id="registerButton" type="submit" style="float:left;">Send Data</button></td>
        </tr>

      </table>

    </form>
  </div>
</div>
</body>
</html>

see http://stackoverflow.com/questions/11988165/enable-or-disable-checkbox-in-html — The Conspiracy, Nov 13 '13 at 12:50

score 0 · Accepted Answer · answered Nov 13 '13 at 12:58

First of all, set your checkbox disabled as default:

<input type="checkbox" name="tos2" id="tos2" value="" style="width:15px !important"  class="textbox required" disabled="disabled" />

In your JS function, when you show the text at "display:block;" you also enable checkbox:

function showHide() {
    var ele = document.getElementById("showHideDiv");
    if(ele.style.display == "block") {
            ele.style.display = "none";
      }
    else {
        ele.style.display = "block";
        document.getElementById("tos2").disabled = false ;
    }        
}

Here's all working: http://jsfiddle.net/3ELhv/

Now user only can select this checkbox when open the TOS

é #TOISS

Works perfect, you are a life saver. – user2964231 Nov 13 '13 at 13:15 — user2964231, Nov 13 '13 at 13:15

Disable checkbox, until text is displayed

1 Answers1