gpt4 book ai didi

javascript - 在 html 代码中使用多个 jquery 和 javascript

转载 作者:行者123 更新时间:2023-11-28 02:51:29 25 4
gpt4 key购买 nike

我目前正在设计网页如下

  • 它带有可折叠面板,所以我使用的是 Accordian set
  • 地址详细信息字段在默认情况下处于禁用状态,但当用户勾选复选框时,该部分中的所有字段都将启用。通过使用 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>&nbsp; &nbsp;<input size="15" name="stuffname" class="input"> &nbsp;&nbsp;<big><label for="stufmname">Middlename<span style="color: red;">*</span></label></big>&nbsp;<input size="15" class="input" name="stufmname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stufsname">Surname<span style="color: red;">*</span></label></big>
&nbsp;&nbsp;&nbsp; <input size="16" class="input" name="stufsname"></div>
<br>
<big><label for="stufgender">Gender<span style="color: red;">*</span></label></big>&nbsp;
<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>&nbsp;&nbsp;<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>
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" class="input" id="cns" name="stufadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; <big><label for="stufadd2">Add. Line 2</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <input type="text" class="input" id="cns2" name="stufadd2" disabled="disabled"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<big><label for="stufadd3">Add. Line 3</label></big>
&nbsp;<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>
&nbsp;&nbsp;&nbsp;
<input size="15" class="input" type="text" id="cns4" name="stufcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stufstate">State<span style="color: red;">*</span></label></big>
&nbsp;&nbsp;
<input size="15" class="input" type="text" id="cns5" name="stufstate" disabled="disabled"/>&nbsp;&nbsp;&nbsp;
<big><label for="stufcountry">Country<span style="color: red;">*</span></label></big>
&nbsp;&nbsp;&nbsp;&nbsp;
<input size="15" class="input" type="text" id="cns6" name="stufcountry" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; <big><label for="stufpincode">Pincode<span style="color: red;">*</span></label></big>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <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>&nbsp;</big>&nbsp;&nbsp;
<input name="stufpgd" class="input">

<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
&nbsp;&nbsp;
<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>
&nbsp;&nbsp; <input name="stufcname" class="input">&nbsp;
<big><label for="stufoccupation">Occupation</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <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>
&nbsp; &nbsp; &nbsp;&nbsp;
<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>&nbsp;&nbsp;<input type="checkbox" id="sccb1" name="stumaddress" value="stumaddress"><br><br>
<label for="stumadd1">Add. Line 1<span style="color: red;">*</span></label>
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cns8" class="input" name="stumadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; <label for="stumadd2">Add. Line 2</label>
&nbsp; &nbsp; &nbsp;&nbsp; <input type="text" id="cns9" class="input" name="stumadd2" disabled="disabled"/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="stumadd3">Add. Line 3</label>
&nbsp; <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>
&nbsp;&nbsp;&nbsp;
<input size="15" type="text" id="cns11" class="input" name="stumcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="stumstate">State<span style="color: red;">*</span></label>
&nbsp;&nbsp;
<input size="15" type="text" id="cns12" class="input" name="stumstate" disabled="disabled"/>&nbsp;
<label for="stumcountry">Country<span style="color: red;">*</span></label>
&nbsp;&nbsp;&nbsp;&nbsp;
<input size="15" type="text" id="cns13" class="input" name="stumcountry" disabled="disabled"/>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;
<label for="stumpincode">Pincode<span style="color: red;">*</span></label>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <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>&nbsp;</big>&nbsp;&nbsp;
<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>
&nbsp;&nbsp; <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>
&nbsp; &nbsp; &nbsp;&nbsp;
<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>
&nbsp;&nbsp;<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>
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cns15" class="input" name="stugadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<big><label for="stugadd2">Add. Line 2</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <input type="text" id="cns16" class="input" name="stugadd2" disabled="disabled"/>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<big><label for="stugadd3">Add. Line 3</label></big>
&nbsp; <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>
&nbsp;&nbsp;&nbsp;
<input size="15" type="text" id="cns18" class="input" name="stugcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stugstate">State<span style="color: red;">*</span></label></big>
&nbsp;&nbsp;
<input size="15" type="text" id="cns19" class="input" name="stugstate" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stugcountry">Country<span style="color: red;">*</span></label></big>
&nbsp;&nbsp;&nbsp;&nbsp;
<input size="15" type="text" id="cns20" class="input" name="stugcountry" disabled="disabled"/>&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <big><label for="stugpincode">Pincode<span style="color: red;">*</span></label></big>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <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>&nbsp;</big>&nbsp;&nbsp;
<input name="stugpgd" class="input">
<big><label for="stuggd">Graduation</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stuggd">
&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stug12">12th Marks/Grade</label></big>
&nbsp; <input size="10" class="input" name="stug12"><br>
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="color: red;">(include University name)</span><br>
<br>
<big><label for="stugpq">Profesional Qualification</label></big>
&nbsp;
<input name="stugpq" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<big><label for="stug10">10th Mark/Grade</label></big> &nbsp; &nbsp; <input size="10" class="input" name="stug10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<big><label for="stugalumni">School Alumni?</label></big>
&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
<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>
&nbsp;&nbsp; <input name="stugcname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<big><label for="stugoccupation">Occupation</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stugoccupation">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;
<big><label for="stugdesignation">Designation</label></big>
&nbsp;&nbsp; <input size="18" class="input" name="stugdesignation"><br>
<br>
<big><label for="stugcadd1">Add. Line 1</label></big>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <input name="stugcadd1" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;&nbsp;
<big><label for="stugcadd2">Add. Line 2</label></big>
&nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stugcadd2">&nbsp;&nbsp;
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp; &nbsp;
<big><label style="font-weight: bold;" for="stugcadd3">Add. Line 3</label></big>
&nbsp; &nbsp;&nbsp; &nbsp; <input size="16" class="input" name="stugcadd3"><br>
<br>
<big><label for="stugccity">City</label></big>
&nbsp;&nbsp;&nbsp; <input size="15" name="stugccity" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;
<big><label for="stugcstate">State</label></big>
&nbsp;&nbsp; <input size="15" class="input" name="stugcstate">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp; &nbsp;
<big><label for="stugcpincode">Pincode</label></big>
&nbsp; <input size="15" class="input" name="stugcpincode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
<big><label for="stugdoj">Joining Date</label></big>
&nbsp;&nbsp;&nbsp; <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>&nbsp;&nbsp;
<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;">&nbsp;&nbsp;&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;<input name="app_siblingname1">
</td>
<td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate<input name="app_siblingdob1">
</td>
<td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Class<select name="app_siblingclass1">
<option>select one</option>

</td>
<td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Gender<select name="app_siblinggender1">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;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>

最佳答案

你有没有考虑过AngularJS ?我认为使用 ngDisabled、ngShow 和 ngIf 可以更轻松、更简洁地完成此操作html 元素上的属性。

AngularJS 试图通过创建新的 HTML 结构来最小化以文档为中心的 HTML 与应用程序所需内容之间的阻抗不匹配。

关于javascript - 在 html 代码中使用多个 jquery 和 javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39189787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com