javascript - bootstrap 中的选项卡导航不适用于另一个 jquery

标签 javascript jquery html css twitter-bootstrap

我在如何解决这个问题上进退两难。基本上我在 Bootstrap 模式中使用选项卡，并使用按钮从一个选项卡导航到另一个选项卡。我为此合并了 jquery。但我也写了一个 jquery 来允许我选择多个具有相同名称的单选按钮(使用值)，但是当我合并 jquery 库时，它似乎停止了导航的发生，当我删除这个 jquery 导航 strrats 发生时。我相信这是因为单选按钮的 jquery 是 v1.3.2 而导航是 v2.1.1。但是我需要同时使用两者来满足要求？请建议如何解决这个问题。下面是代码:

 $(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>

最佳答案

问题是 attr 没有正确取消设置 checked 属性。如果删除旧的 jQuery 库 (v1.3.2)，则可以使用 .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);
   });
});

关于javascript - bootstrap 中的选项卡导航不适用于另一个 jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43147934/

上一篇：python - 查找元素的直接子元素

下一篇：html - Bootstrap 按钮组显示/隐藏 Div

相关文章：

javascript - 字符串转为 HTML，无需额外围绕 div

javascript - html canvas clearRect() 不起作用

javascript - 在 Reactjs 中的自定义 DOM 节点中渲染内部组件

php - 使用 AJAX 和 PHP 将 <options> 附加到 <select>

javascript - 推特 :Application-only authentication error Origin null is not allowed by Access-Control-Allow-Origin

html - 是否有任何 CSS 来对齐框/元素？

javascript - 如何在 Angular 2 项目中使用 javascript 库

javascript - Ajax JSON 空传递

php - 无法显示图像路径存储在数据库中的图像

python - 使用 BeautifulSoup 获取具有此属性的最近的前一个元素

©2024 IT工具网  联系我们