2
나는 이것을 해결하는 방법에 관한 딜레마에 빠져 있습니다. 기본적으로 나는 부트 스트랩 모달에서 탭을 사용 중이며 한 탭에서 다른 탭으로 이동하는 데 버튼을 사용하고 있습니다. 나는 그것을 위해 jquery를 통합했다. 하지만 나는 또한 동일한 이름 (값을 사용하여) 여러 라디오 버튼을 선택할 수 있도록 jquery를 썼습니다.하지만 jquery 라이브러리를 통합 할 때 발생하는 탐색을 중단하고이 jquery 탐색 스트라이프를 제거 할 때 발생합니다. 라디오 버튼 jQuery는 v1.3.2이고 탐색은 v2.1.1이기 때문에 이러한 현상이 발생한다고 생각합니다. 그러나이 두 가지 요구 사항을 모두 수행해야합니까? 이 문제를 해결하는 방법을 제안하십시오. 문제는 ATTR 제대로 확인 속성을 설정 해제 아니 었습니다부트 스트랩의 탭 탐색이 다른 jquery와 작동하지 않습니다.
$(document).ready(function(){
$("#selectINTI").click(function() {
$('input:radio[name=app_decision]:nth(0)').attr('checked',true);
//$('input:radio[name=app_decision]')[0].checked = true;
});
$("#selectINTE").click(function() {
$('input:radio[name=app_decision]:nth(1)').attr('checked',true);
//$('input:radio[name=app_decision]')[1].checked = true;
});
$("#selectR").click(function() {
$('input:radio[name=app_decision]:nth(2)').attr('checked',true);
//$('input:radio[name=app_decision]')[2].checked = true;
});
});
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});fieldset {
border:2px solid black;
border-radius:10px;
padding:20px;
position:relative;
}
legend {
background: #FF9;
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 4px;
margin:0px;
}
.modal .modal-dialog {
width: 90%;
}<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>admission_dec</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--This is Jquery to select the multiple radio button on click of button-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend><i class="fa fa-search" aria-hidden="true"></i> Search</legend>
<div class="row">
<div class ="form-inline">
<div class="col-sm-4">
<label for="acad_period">Academic Year</label>
<input class="form-control input-sm" name="acad_period" required>
</div>
<div class="col-sm-4">
<label for="stuclass">Class</label>
<select name="stuclass" class="form-control" required>
<option value="">Please select...</option>
<option value="13">XII</option>
<option value="12">XI</option>
<option value="11">X</option>
<option value="10">IX</option>
<option value="9">VIII</option>
<option value="8">VII</option>
<option value="7">VI</option>
<option value="6">V</option>
<option value="5">IV</option>
<option value="4">III</option>
<option value="3">II</option>
<option value="2">I</option>
<option value="1">KG/Prep</option>
<option value="Nurs">Nursery</option>
</select>
</div>
<div class="col-sm-4">
<label for="appstatus">Application Status</label>
<select name="appstatus" class="form-control" required>
<option value="">Please select...</option>
<option value="N">New</option>
<option value="INTI">Invited for Interview</option>
<option value="INTE">Invited for Exam</option>
</select>
</div>
</div>
</div>
<br>
<div style="margin-left: 875px;">
<input name="adm_search" value="Search" class="btn btn-success" type="submit">
<input name="adm_cancel" value="Cancel" class="btn btn-danger" type="reset">
<br>
</div>
</fieldset>
<br>
<div class="table-responsive">
<table border="1" cellpadding="2" cellspacing="1" class="table-hover">
<tbody>
<tr>
<th colspan="5" rowspan="1" style="vertical-align: top; width: 142x; text-align: left;"><i class="fa fa-th-list" aria-hidden="true"></i> Result</th>
<th style="vertical-align: top; width: 323px; text-align: center;">Decision</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: top; width: 120px; text-align: center;">Student ID</th>
<th style="vertical-align: top; width: 250px; text-align: center;">Name</th>
<th style="vertical-align: top; width: 65px; text-align: center;">App.Status</th>
<th style="vertical-align: top; width: 65px; text-align: center;">App.Date</th>
<th style="vertical-align: top; width: 350px;">
<button name="app_intall" class="btn btn-info btn-md" value="Interview All" id="selectINTI"><span class="glyphicon glyphicon-user"></span>Interview All</button>
<button name="app_eall" class="btn btn-info btn-md" value="Exam All" id="selectINTE"><span class="glyphicon glyphicon-edit"></span>Exam All</button>
<button name="app_rall" class="btn btn-info btn-md" value="Reject All" id="selectR"><span class="glyphicon glyphicon-remove"></span>Reject All</button>
</th>
</tr>
<tr>
<td style="vertical-align: top; width: 79px;">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-eye-open"></span> View</button>
</td>
<td style="vertical-align: top; width: 149px;"></td>
<td style="vertical-align: top; width: 250px;"></td>
<td style="vertical-align: top; width: 145px;"></td>
<td style="vertical-align: top; width: 140px;"></td>
<td style="vertical-align: top; width:120px; text-align: center;">
<input name="app_decision" value="INTI" type="radio" >Interview
<input name="app_decision" value="INTE" type="radio">Exam
<input name="app_decision" value="R" type="radio">Reject
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div style="margin-left: 875px;">
<button type="button" name="adm_submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Process</button>
<button type="reset" name="adm_cancel" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Student Appilcation Form</h4>
</div>
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-controls="appdetailTab" role="tab" data-toggle="tab">Applicant Detail</a>
</li>
<li role="presentation"><a href="#tab2" aria-controls="adddetailTab" role="tab" data-toggle="tab">Additional Details</a>
</li>
<li role="presentation"><a href="#fdetailTab" aria-controls="fdetailTab" role="tab" data-toggle="tab">Father's Detail</a>
</li>
<li role="presentation"><a href="#mdetailTab" aria-controls="mdetailTab" role="tab" data-toggle="tab">Mother's Detail</a>
</li>
<li role="presentation"><a href="#gdetailTab" aria-controls="gdetailTab" role="tab" data-toggle="tab">Guardian's Detail</a>
</li>
<li role="presentation"><a href="#sdetailTab" aria-controls="sdetailTab" role="tab" data-toggle="tab">Sibling's Detail</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<br>
<fieldset>
<legend>Personal Details</legend>
<div class ="form-inline">
<div class="col-sm-3">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Student image" style="border: 2px solid ; width: 165px; height: 214px;" align="right" hspace="5" vspace="1">
</div>
<div class="col-sm-3">
<label for="stutitle">Title</label>
<input class="form-control input-sm" name="stutitle" readonly>
</div>
<div class="col-sm-3">
<label for="stugender">Gender</label>
<input class="form-control input-sm" name="stugender" readonly>
</div>
<div class="col-sm-3">
<label for="stuage">Age(yrs)</label>
<input class="form-control input-sm" name="stuage" readonly>
</div>
</div>
<div class ="form-inline">
<div class="col-sm-3">
<br>
<label for="stufname">Firstname</label>
<input class="form-control input-sm" name="stufname" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stuheight">Height(cm)</label>
<input class="form-control input-sm" name="stuheight" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stmdob">Birthdate</label>
<input class="form-control input-sm" name="studob" readonly>
</div>
</div>
<div class ="form-inline">
<div class="col-sm-3">
<br>
<label for="stsname">Surname</label>
<input name="stusname" class="form-control input-sm" readonly>
</div>
<br>
<div class="col-sm-3">
<br>
<label for="stumobile">Mobile</label>
<input name="stumobile" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stuhphone">Homephone</label>
<input name="stuhphone" class="form-control input-sm" readonly>
</div>
</div>
<div class="col-sm-3">
<br>
<label for="stunatn">Nationality</label>
<input name="stunatn" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stsname">Middlename</label>
<input name="stumname" class="form-control input-sm" readonly>
</div>
<br>
<div class="col-sm-3">
<br>
<label for="stuemail">Email Address</label>
<input size="52" class="form-control input-sm" name="stuemail" readonly>
</div>
</fieldset>
<br>
<fieldset>
<legend>Address Details</legend>
<div class="form-inline">
<div class="col-sm-6">
<label for="stuadd1">Address Line 1</label>
<input name="stuadd1" size="40" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="stuadd2">Address Line 2</label>
<input name="stuadd2" size="40" class="form-control input-sm" readonly>
</div>
</div>
<br><br>
<div class="form-inline">
<div class="col-sm-6">
<label for="stuadd3">Address Line 3</label>
<input name="stuadd3" size="40" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="stucity">City</label>
<input name="stucity" class="form-control input-sm" readonly>
</div>
</div>
<br><br>
<div class="form-inline">
<div class="col-sm-4">
<label for="stustate">State</label>
<input name="stustate" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<label for="stucountry">Country</label>
<input name="stucountry" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<label for="stupostcode">Pincode</label>
<input name="stupostcode" class="form-control input-sm" readonly>
</div>
</div>
</fieldset>
<br>
<fieldset>
<legend>Application Details</legend>
<div class="form-inline">
<div class="col-sm-6">
<label for="appclass_applied" >Class Applied for</label>
<input name="appclass_applied" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="acad_period" >Year Applied for</label>
<input name="acad_period" class="form-control input-sm" readonly>
</div>
</div>
<br>
<br>
<div class="form-inline">
<div class="col-sm-3">
<label for="app_prevclass">Previous Class</label>
<input name="app_prevclass" size="5" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<label>Year Passed</label>
<input name="app_prevyear" size="5" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="app_prevcgpaper">Previous CGPA/Percentage</label>
<input name="app_prevcgpaper" size="5" class="form-control input-sm" readonly>
</div>
</div>
<br>
<br>
<div class="form-inline">
<div class="col-sm-5">
<label for="app_prevschlname">Previous School Name</label>
<input name="app_prevschlname" type="text" class="form-control input-sm" readonly>
</div>
<div class="col-sm-7">
<label>Previous School Board</label>
<input name="app_prevboard" type="text" class="form-control input-sm" readonly>
<input name="app_prevboard_oth" class="form-control input-sm" readonly>
</div>
</div>
</fieldset>
<br>
<p class="tabnav" align="right">
<a rel="nofollow" rel="noreferrer" class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<div class="form-inline">
<div class="col-sm-6">
<br>
<label for="stublgrp">Blood Group</label>
<input name="stublgrp" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label for="stuweight">Weight(kg)</label>
<input name="stuweight" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<br>
<label>Student Category</label>
<input name="stucategory" class="form-control input-sm" readonly>
<input name="stucato" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label>Allergy ?</label>
<input name="stuallergy_yes" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label>Disability ?</label>
<input name="studisability_yes" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label>Transport needed ?</label>
<input name="stutransport" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label>School Distance (km)</label>
<input name="stutransport_dist" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-4">
<br>
<label for="stubplace">Birth Place</label>
<input name="stubplace" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<br>
<label for="stumthtng">Mother Tongue</label>
<input name="stumthtng" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<br>
<label for="stureligion">Religion</label>
<input name="stureligion" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label for="stuidentity">Identity Type</label>
<input name="stuidentity" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label for="stuidentitynum">Id Number</label>
<input name="stuidentitynum" class="form-control input-sm" readonly>
<br>
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<p class="tabnav" align="right">
<br>
<a class="btn btn-primary btnPrevious"><< Previous</a>
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fdetailTab">
<p class="tabnav" align="right">
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="mdetailTab">
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="gdetailTab">
77777777
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="sdetailTab">
<br>
<table border="1" cellpadding="2" cellspacing="1" class="table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Birthdate</th>
<th>Class</th>
<th>Gende</th>
<th>School Name</th>
</tr>
<tr>
</tr>
</tbody>
</table>
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
대부분의 경우, 낮은 하나 만 더 높은 버전을로드하고 무시하는 것은 모두 작동하게됩니다 토글을 처리하는 .prop 기능을 사용할 수 있습니다 . 당신이 원하는 것은 가능하지만 실제로 갈 길은 잘못되었습니다. 헬리콥터를 타서 빵을 사 먹는 것과 같습니다. –
일반적으로 사용할 수있는 .noConflict() 함수 (https://api.jquery.com/jquery.noconflict/)가 있으면 일반적으로 두 번 이상 jQuery를 포함하면 안됩니다. 비록 당신이 jQuery의 두 버전을 필요로하지 않는 것 같습니다. – eric
@eric 만약 내가 그 중 하나를 통합하면 다른 하나는 작동하지 않는다. 그래서 나는 그 둘을 포함해야한다. 나는 noconflict를 돌보지 만, 도움이되고 싶습니다. –