禁用復選框，直到顯示文本

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 個解決方案

解決方案1
0 已采納 2013-11-13 12:58:18

禁用復選框，直到顯示文本

問題描述

1 個解決方案

解決方案1 0 已采納 2013-11-13 12:58:18

解決方案1
0 已采納 2013-11-13 12:58:18