0

因为我是 html、css、php 的新手，所以我在完成一个小项目时遇到了很多问题。所以请不要介意。我已经包括了一个屏幕截图。问题是，每当我单击单选按钮“是”时，只有相应表格的输入文本字段才能工作。如果我选择“否”按钮，那么应该隐藏文本字段，即它不会接受任何输入，并且我应该能够在不填满表格的情况下继续操作。提前致谢。

在此处输入图像描述

.html

<body>
<form action="reg2.php" method="post">
<div id="formWrap">
  <div class="row">
        <div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>  
  </div> <!-- end of 0th row -->

<div id="form">
    <div class="row">
        <div class="labelusn1">USN</div>
        <div class="inputusn">
            <input type="text" id="usn" required="required" class="usndetail" name="usn"/>
        </div>
    </div> <!-- end of 1st row -->
    <h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
    <div class="row>
     <div class="inputradio1" style="margin-left:50px">
        <input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
        <input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
  </div> <!-- end of  row -->   
    <table width="719" border="1" align="center" style="margin-top:10px">
  <tr bgcolor="#A7A7A7">
    <td width="87"><div align="center" class="style1">    Course Code </div></td>
    <td width="50"><div align="center" class="style2">    Credits</div></td>
   <td width="87"><div align="center" class="style3">    Status(D/W/F)</div></td>
    <td width="467"><div align="center" class="style4">    Remarks</div></td>
 </tr>
  <tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>

我留下了代码的其余部分......如有必要，我会发布

4

4 回答 4

1

您的问题已解决，请检查：

只需添加以下脚本：

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    // Disabling Text Fields by default
    $("table input[type='text']").each(function () {
        $(this).attr("disabled", "disabled");
    });

    $(".inputradio1 input[name=sex]").change(function () {
        var val = $(this).val();
        if (val == "No") {
            $("table input[type='text']").each(function () {
                $(this).attr("disabled", "disabled");
            });
        } else if (val == "Yes") {
            $("table input[type='text']").each(function () {
                $(this).removeAttr("disabled");
            });
        }
    });
});
</script>

或者在这里查看小提琴http://jsfiddle.net/kDG5t/2/

于 2013-07-27T09:24:36.230 回答
1

类似http://jsfiddle.net/Z8jU3/1/的东西？

$('.detailradio1').change(function(){
    if($(this).attr('id')=='sex' && $(this).is(':checked')){
        $('table').hide();
    }else{
        $('table').show();
    }
})
于 2013-07-27T07:26:38.043 回答
1

在 html 部分，我只是定义输入框的 ID。

HTML:-

    <body>
<form action="reg2.php" method="post">
<div id="formWrap">
  <div class="row">
        <div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>  
  </div> <!-- end of 0th row -->

<div id="form">
    <div class="row">
        <div class="labelusn1">USN</div>
        <div class="inputusn">
            <input type="text" id="usn" required="required" class="usndetail" name="usn"/>
        </div>
    </div> <!-- end of 1st row -->
    <h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
    <div class="row>
     <div class="inputradio1" style="margin-left:50px">
        <input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
        <input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
  </div> <!-- end of  row -->   
    <table width="719" border="1" align="center" style="margin-top:10px">
  <tr bgcolor="#A7A7A7">
    <td width="87"><div align="center" class="style1">    Course Code </div></td>
    <td width="50"><div align="center" class="style2">    Credits</div></td>
   <td width="87"><div align="center" class="style3">    Status(D/W/F)</div></td>
    <td width="467"><div align="center" class="style4">    Remarks</div></td>
 </tr>
  <tr>
<td><input type="text" id="course_code"  name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text"  id="credits" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text"  id="status" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="remarks" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>

和 jquery 是： -

$('#radio').click(function()
{  
  $('#course_code').removeAttr("disabled");
    $('#credits').removeAttr("disabled");
    $('#status').removeAttr("disabled");
    $('#remarks').removeAttr("disabled");
});

$('#sex').click(function()
 {
  $('#course_code').attr("disabled","disabled");
    $('#credits').attr("disabled","disabled");
    $('#status').attr("disabled","disabled");
    $('#remarks').attr("disabled","disabled");
});

如果您希望在初始页面加载时禁用所有输入框，那么您必须在所有输入框中提及 disabled="disabled"，如下所示：-

其余的都是一样的......

于 2013-07-27T08:48:50.253 回答
0

如果您只想隐藏整个部分，则可以使用 CSS。

如果您的收音机与 div 之类的容器元素位于同一 DOM 级别，例如：

div.formContainer {
  display: none;
}

input[type=radio]#yes:checked ~ div.formContainer {
  display: block;
}

HTML 基本上会包含以下内容： 

<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
  <input type="text" id="input1" name="input1" value="Hello World!" />
</div>

这应该意味着如果“是”是当前选择，那么文本输入字段应该是可见的，如果是不是当前选择，那么该字段将是不可见的。

于 2013-07-27T11:21:18.240 回答