Question

我有这个表单，它工作正常但我需要 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>

Answer 1

首先，将复选框设置为默认设置：

<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

禁用复选框，直到显示文本

1 个答案: