別のjqueryで動作していないブートストラップのタブナビゲーション

これを解決する方法については、私はジレンマにいます。基本的に私はブートストラップモーダルでタブを使用していて、あるタブから別のタブにナビゲートするためにボタンを使用しています。私はそのためにjqueryを組み込みました。しかし、同じ名前の複数のラジオボタンを選択できるようにjqueryを書いていますが（値を使用して）、jqueryライブラリを組み込むとナビゲーションが停止するようですが、このjqueryナビゲーションストラトがなくなったようです。ラジオボタンのjqueryがv1.3.2で、ナビゲーションがv2.1.1であるため、これが起こっていると思います。しかし、私は両方の要件を満たすために使用する必要がありますか？これを解決する方法を提案してください。問題は、attrが正しくcheckedプロパティを設定解除しなかったということでした別の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>&nbsp;Search</legend> 
 
     <div class="row"> 
 
     <div class ="form-inline"> 
 
     <div class="col-sm-4"> 
 
     <label for="acad_period">Academic Year</label>&nbsp;&nbsp; 
 
     <input class="form-control input-sm" name="acad_period" required> 
 
     </div> 
 

 
     <div class="col-sm-4"> 
 
     <label for="stuclass">Class</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <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>&nbsp;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">&times;</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>&nbsp;&nbsp; 
 
     <input name="stuadd1" size="40" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <label for="stuadd2">Address Line 2</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stuadd3" size="40" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <label for="stucity">City</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stustate" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <label for="stucountry">Country</label>&nbsp;&nbsp; 
 
     <input name="stucountry" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <label for="stupostcode">Pincode</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="appclass_applied" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <label for="acad_period" >Year Applied for</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stublgrp" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <br> 
 
     <label for="stuweight">Weight(kg)</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stuallergy_yes" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <br> 
 
     <label>Disability ?</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stutransport" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <br> 
 
     <label>School Distance (km)</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stubplace" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <br> 
 
     <label for="stumthtng">Mother Tongue</label>&nbsp;&nbsp; 
 
     <input name="stumthtng" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
     <br> 
 
     <label for="stureligion">Religion</label>&nbsp;&nbsp; 
 
     <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>&nbsp;&nbsp; 
 
     <input name="stuidentity" class="form-control input-sm" readonly> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
     <br> 
 
     <label for="stuidentitynum">Id Number</label>&nbsp;&nbsp; 
 
     <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>

出典

2017-03-31 Jigna Jain

、唯一の上位バージョンをロードし、低い方が仕事の両方を行います無視を使用することができます。あなたが望むのは可能ですが、それは本当に間違った方法であり、ヘリコプターに乗ってパンを買うようなものです。 –

一般に、使用できる.noConflict（）関数（https://api.jquery.com/jquery.noconflict/）がある場合は、jQueryを複数回使用しないでください。あなたがjQueryの2つのバージョンを必要としているようには思われません。 – eric

@eric私は1つを組み込んで他のdoesntの仕事をしているので、私はそれらの両方を含める必要があります。私はnoconflictを渡しましたが、助けてほしいと思っています –

：以下のコードです。あなたは（v1.3.2デベロッパー）古いjQueryライブラリを削除する場合は、正しくトグルを処理.prop機能（http://api.jquery.com/prop/）ほとんどの

$(document).ready(function() { 
    $("#selectINTI").click(function() { 
    $('input:radio[name=app_decision]:nth(0)').prop('checked', true); 
    }); 
    $("#selectINTE").click(function() { 
    $('input:radio[name=app_decision]:nth(1)').prop('checked', true); 
    }); 
    $("#selectR").click(function() { 
    $('input:radio[name=app_decision]:nth(2)').prop('checked', true); 
    }); 
});

出典

2017-03-31 19:33:35 eric

ありがとうございました。あなたはスターである –

別のjqueryで動作していないブートストラップのタブナビゲーション

答えて

関連する問題