【发布时间】：2017-01-04 12:18:42
【问题描述】：
我目前正在设计如下网页
- 它带有可折叠面板，所以我使用的是 Accordian 套装
- 地址详细信息默认情况下禁用这些字段，但当用户勾选复选框时，该部分中的所有字段都会启用。通过使用 javascripts
- 表的兄弟部分被隐藏（使用 CSS St-yle），然后根据选择的行数使用 Jquery 显示
面临的问题：
只有 2 个 javascript 作品（第 1 节和第 3 节）在工作，即使它们相同。
我的 jQuery 根本不工作（即使它自己工作）。
但在一次将所有这些组合在一起之后，它不会。
尝试查看无冲突功能，但也无法正常工作。你们能帮我理解我哪里出错了吗？
下面是code我正在使用：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
<script type="text/javascript">
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
$('#cns4').removeAttr("disabled");
$('#cns5').removeAttr("disabled");
$('#cns6').removeAttr("disabled");
$('#cns7').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
$('#cns4').attr("disabled", true);
$('#cns5').attr("disabled", true);
$('#cns6').attr("disabled", true);
$('#cns7').attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb2').click(function(){
if (this.checked) {
$('#cns15').removeAttr("disabled");
$('#cns16').removeAttr("disabled");
$('#cns17').removeAttr("disabled");
$('#cns18').removeAttr("disabled");
$('#cns19').removeAttr("disabled");
$('#cns20').removeAttr("disabled");
$('#cns21').removeAttr("disabled");
} else {
$("#cns15").attr("disabled", true);
$("#cns16").attr("disabled", true);
$("#cns17").attr("disabled", true);
$("#cns18").attr("disabled", true);
$("#cns19").attr("disabled", true);
$("#cns20").attr("disabled", true);
$("#cns21").attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb2').click(function(){
if (this.checked) {
$('#cns15').removeAttr("disabled");
$('#cns16').removeAttr("disabled");
$('#cns17').removeAttr("disabled");
$('#cns18').removeAttr("disabled");
$('#cns19').removeAttr("disabled");
$('#cns20').removeAttr("disabled");
$('#cns21').removeAttr("disabled");
} else {
$("#cns15").attr("disabled", true);
$("#cns16").attr("disabled", true);
$("#cns17").attr("disabled", true);
$("#cns18").attr("disabled", true);
$("#cns19").attr("disabled", true);
$("#cns20").attr("disabled", true);
$("#cns21").attr("disabled", true);
}
});
});
</script>
<script>
$( document ).ready(function() {
$( "select" ).change(function () {
var val = $( "select" ).val();
if (val != 'select one') {
var tableRows = $("table tr");
jQuery.each(tableRows, function(i ,tr) {
if (i > val) {
$(tr).hide();
} else {
$(tr).show();
}
})
}
}
)
});
</script>
<style>
tbody tr {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group">
<big><label for="stuffname">Firstname<span style="color: red;">*</span></label></big> <input size="15" name="stuffname" class="input"> <big><label for="stufmname">Middlename<span style="color: red;">*</span></label></big> <input size="15" class="input" name="stufmname">
<big><label for="stufsname">Surname<span style="color: red;">*</span></label></big>
<input size="16" class="input" name="stufsname"></div>
<br>
<big><label for="stufgender">Gender<span style="color: red;">*</span></label></big>
<select name="stufgender" class="input">
<option value="">-select--</option>
<option>Male</option>
<option>Mx</option>
</select>
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stufaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big> <input type="checkbox" id="sccb" name="stufaddress" value="stufaddress"><br><br>
<big><label for="stufadd1">Add. Line 1<span style="color: red;">*</span></label></big>
<input type="text" class="input" id="cns" name="stufadd1" disabled="disabled"/>
<big><label for="stufadd2">Add. Line 2</label></big>
<input type="text" class="input" id="cns2" name="stufadd2" disabled="disabled"/>
<big><label for="stufadd3">Add. Line 3</label></big>
<input type="text" class="input" id="cns3" name="stufadd3" disabled="disabled" size="18"/><br>
<br>
<big><label for="stufcity">City<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns4" name="stufcity" disabled="disabled"/>
<big><label for="stufstate">State<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns5" name="stufstate" disabled="disabled"/>
<big><label for="stufcountry">Country<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns6" name="stufcountry" disabled="disabled"/>
<big><label for="stufpincode">Pincode<span style="color: red;">*</span></label></big>
<input size="10" class="input" type="text" id="cns7" name="stufpincode" disabled="disabled"/> </div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stufpgd">Post Graduation </label></small><label for="stufpgd"></label></big> </big>
<input name="stufpgd" class="input">
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
<span style="color: red;">(include University name)</span><br>
<br>
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stufcname">Company Name</label></big>
<input name="stufcname" class="input">
<big><label for="stufoccupation">Occupation</label></big>
<input class="input" name="stufoccupation">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group"> <big><label for="stumtitle">Title<span style="color: red;">*</span></label></big>
<select name="stumtitle" class="input">
<option value="">-select--</option>
<option>Mrs</option>
<option>Ms</option>
<option>Miss</option>
<option>Dr</option>
</select>
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stumaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big><big> <input type="checkbox" id="sccb1" name="stumaddress" value="stumaddress"><br><br>
<label for="stumadd1">Add. Line 1<span style="color: red;">*</span></label>
<input type="text" id="cns8" class="input" name="stumadd1" disabled="disabled"/>
<label for="stumadd2">Add. Line 2</label>
<input type="text" id="cns9" class="input" name="stumadd2" disabled="disabled"/>
<label for="stumadd3">Add. Line 3</label>
<input size="18" type="text" id="cns10" class="input" name="stumadd3" disabled="disabled"/><br>
<br>
<label for="stumcity">City<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns11" class="input" name="stumcity" disabled="disabled"/>
<label for="stumstate">State<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns12" class="input" name="stumstate" disabled="disabled"/>
<label for="stumcountry">Country<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns13" class="input" name="stumcountry" disabled="disabled"/>
<label for="stumpincode">Pincode<span style="color: red;">*</span></label>
<input size="10" type="text" id="cns14" class="input" name="stumpincode" disabled="disabled"/></div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stumpgd">Post Graduation </label></small><label for="stumpgd"></label></big> </big>
<input name="stumpgd" class="input">
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stumcname">Company Name</label></big>
<input name="stumcname" class="input">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group"> <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
<select name="stugtitle" class="input">
<option value="">-select--</option>
<option>Mr</option>
<option>Mrs</option>
</select>
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stugaddress">If address different than Applicant's address please tick the checkbox?<span style="color: red;">*</span></label></big>
<input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress"><br><br>
<big><label for="stugadd1">Add. Line 1<span style="color: red;">*</span></label></big>
<input type="text" id="cns15" class="input" name="stugadd1" disabled="disabled"/> <big><label for="stugadd2">Add. Line 2</label></big>
<input type="text" id="cns16" class="input" name="stugadd2" disabled="disabled"/>
<big><label for="stugadd3">Add. Line 3</label></big>
<input size="18" type="text" id="cns17" class="input" name="stugadd3" disabled="disabled"/><br>
<br>
<big><label for="stugcity">City<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns18" class="input" name="stugcity" disabled="disabled"/>
<big><label for="stugstate">State<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns19" class="input" name="stugstate" disabled="disabled"/>
<big><label for="stugcountry">Country<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns20" class="input" name="stugcountry" disabled="disabled"/>
<big><label for="stugpincode">Pincode<span style="color: red;">*</span></label></big>
<input size="10" type="text" id="cns21" class="input" name="stumgpincode" disabled="disabled"/></div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stugpgd">Post Graduation </label></small><label for="stugpgd"></label></big> </big>
<input name="stugpgd" class="input">
<big><label for="stuggd">Graduation</label></big>
<input class="input" name="stuggd">
<big><label for="stug12">12th Marks/Grade</label></big>
<input size="10" class="input" name="stug12"><br>
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
<span style="color: red;">(include University name)</span><br>
<br>
<big><label for="stugpq">Profesional Qualification</label></big>
<input name="stugpq" class="input">
<big><label for="stug10">10th Mark/Grade</label></big> <input size="10" class="input" name="stug10">
<big><label for="stugalumni">School Alumni?</label></big>
<select name="stugalumni" class="input">
<option value="">-select--</option>
<option>Yes</option>
<option>No
</option>
</select>
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stugcname">Company Name</label></big>
<input name="stugcname" class="input">
<big><label for="stugoccupation">Occupation</label></big>
<input class="input" name="stugoccupation">
<big><label for="stugdesignation">Designation</label></big>
<input size="18" class="input" name="stugdesignation"><br>
<br>
<big><label for="stugcadd1">Add. Line 1</label></big>
<input name="stugcadd1" class="input">
<big><label for="stugcadd2">Add. Line 2</label></big>
<input class="input" name="stugcadd2">
<big><label style="font-weight: bold;" for="stugcadd3">Add. Line 3</label></big>
<input size="16" class="input" name="stugcadd3"><br>
<br>
<big><label for="stugccity">City</label></big>
<input size="15" name="stugccity" class="input">
<big><label for="stugcstate">State</label></big>
<input size="15" class="input" name="stugcstate">
<big><label for="stugcpincode">Pincode</label></big>
<input size="15" class="input" name="stugcpincode">
<big><label for="stugdoj">Joining Date</label></big>
<input class="input" name="stugdoj" size="15" type="date">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sibling Detail</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<big style="font-family: Comic Sans MS;"><big>Select Number of siblings<span
style="color: red; font-weight: bold;">*</span></big></big><span
style="font-family: Comic Sans MS;"> </span>
<select name="app_siblingno" class="input">
<option>select one</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<br>
<br>
<table style="text-align: left; width: 100px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" rowspan="1" style="vertical-align: top;">
</td>
</tr>
<tr>
<td style="vertical-align: top;">S.No 1
</td>
<td style="vertical-align: top;"> Name <input name="app_siblingname1">
</td>
<td style="vertical-align: top;"> Birthdate<input name="app_siblingdob1">
</td>
<td style="vertical-align: top;"> Class<select name="app_siblingclass1">
<option>select one</option>
</td>
<td style="vertical-align: top;"> Gender<select name="app_siblinggender1">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"> School Name<input name="app_schlname1">
</td>
</tr>
<tr>
<td style="vertical-align: top;">2
</td>
<td style="vertical-align: top;"><input name="app_siblingname2">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob2">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass2">
<option>select one</option>
<option>XII</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender2">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname2">
</td>
</tr>
<tr>
<td style="vertical-align: top;">3
</td>
<td style="vertical-align: top;"><input name="app_siblingname3">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob3">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass3">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender3">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname3">
</td>
</tr>
<tr>
<td style="vertical-align: top;">4
</td>
<td style="vertical-align: top;"><input name="app_siblingname4">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob4">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass4">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender4">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname4">
</td>
</tr>
<tr>
<td style="vertical-align: top;">5
</td>
<td style="vertical-align: top;"><input name="app_siblingname5">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob5">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass5">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender5">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname5">
</td>
</tr>
<tr>
<td style="vertical-align: top;">6
</td>
<td style="vertical-align: top;"><input name="app_siblingname6">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob6">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass6">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender6">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname6">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Document Upload</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
Document Upload
(Only PDF/JPE/JPEG)</span></big></big></label></big><big><br>
</big><big>
</big><big><span style="color: red;">(Note : File size
should not be more than 100KB)</span></big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big></div><big>
</big><big><br>
</big><big>
</big>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
由于字数限制，我必须从代码中删除一些字段。请帮助我如何使其按预期工作....
-
你好像去掉了一些重要的字段，我在javascript中似乎找不到你引用的id的字段。
-
另外，你的第二个和第三个 javascript 块似乎是相同的，这是一个错误吗？
-
感谢@simonv 指出这一点。我现在已经设法让 javascript 工作了。但是 Jquery 仍然无法正常工作（在第 4 节中）。 jsfiddle.net/53nfxxdw
标签： javascript jquery html optimization