0

我有这个表格，它工作正常，但我需要禁用tos2复选框，直到用户单击以显示 TOS。只有这样，用户才能选中该复选框。如果有人可以给我一个提示让这个工作，那就太好了。

提前致谢。

<?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>
4

1 回答 1

0

首先，将您的复选框设置为默认禁用：

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

在您的 JS 函数中，当您在“display:block;”处显示文本时 您还启用复选框：

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 ;
    }        
}

这里一切正常：http: //jsfiddle.net/3ELhv/

现在用户只能在打开 TOS 时选择此复选框

é #TOISS

于 2013-11-13T12:58:18.973 回答