Question

因为我是html，css，php的新手，所以我在完成一个小项目时面临很多问题。所以请不要介意。我已经包含了一个屏幕截图。问题是，每当我单击单选按钮“是”时，只有相应表的输入文本字段才有效。如果我选择“否”按钮，则应隐藏文本字段，即不接受任何输入，我应该能够继续而不填写表格。提前谢谢。

enter image description here

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>

我离开了代码的其余部分......如果有必要，我会发布

Answer 1

类似于http://jsfiddle.net/Z8jU3/1/？

$('.detailradio1').change(function(){
    if($(this).attr('id')=='sex' && $(this).is(':checked')){
        $('table').hide();
    }else{
        $('table').show();
    }
})

Answer 2

在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”，如下所示： -

休息一切都是一样的....

Answer 3

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

只需添加以下脚本：

<!-- 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/

Answer 4

如果您只想隐藏整个部分，可以使用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>

这应该意味着如果＆＃34;是＆＃34;是当前的选择，然后文本输入字段应该是可见的，如果是不是当前选择，那么该字段将是不可见的。

如何使用单选按钮使表格可见？

4 个答案: