- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在如何解决这个问题上进退两难。基本上我在 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> 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>
最佳答案
问题是 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/
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
我在 JPanel 中有一个 JTextArea,我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时,框架似乎为 JScrollPane 腾出了空间,但
我想在 xcode 中实现以下功能。 我有一个 View Controller 。在这个 UIViewController 中,我有一个 UITabBar。它们下面是一个 UIView。将 UITab
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能? 我有一个包含父用户记录的表,另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串,而
我想使用 JSON 作为 mirth channel 的输入和输出,例如详细信息保存在数据库中或创建 HL7 消息。 简而言之,输入为 JSON 解析它并输出为任何格式。 最佳答案 var objec
通常我会使用 R 并执行 merge.by,但这个文件似乎太大了,部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上,插补似乎删除了 snp ID 的 rs 数字,我只剩
我有一个以前可能被问过的问题,但我很难找到正确的描述。我希望有人能帮助我。 在下面的代码中,我设置了varprice,我想添加javascript变量accu_id以通过rails在我的数据库中查找记
我有一个简单的 SVG 文件,在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
所以我正在为学校编写一个 Ruby 程序,如果某个值是 1 或 3,则将 bool 值更改为 true,如果是 0 或 2,则更改为 false。由于我有 Java 背景,所以我认为这段代码应该有效:
我做了什么: 我在这些账户之间创建了 VPC 对等连接 互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时,我成功测试了从另一个 La
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
我正在使用 Magento 中的新模板。为避免重复代码,我想为每个产品预览使用相同的子模板。 特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型? 编辑(改写): 当协议(protocol)方法只有一个参数时,根据该单个参数的类型(直接或任意)找到实现。当协议(p
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常,但我想从我的 PHP 代码中获取数据,我使
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。 我有一个动态表单,我想在其中附加一些其他 h
我正在尝试找到一种解决方案,以在 componentDidMount 中的映射项上使用 setState。 我正在使用 GraphQL连同 Gatsby返回许多 data 项目,但要求在特定的 pat
我在 ScrollView 中有一个 View 。只要用户按住该 View ,我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。 为什么会这
当我到达我的 Activity 时,我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中,我想显示一个 RecyclerView,但他从未出现过,有了断点,我看到
当我按下 Activity 中的按钮时,会弹出一个 DialogFragment。在对话框 fragment 中,有一个看起来像普通 ListView 的 RecyclerView。 我想要的行为是当
我是一名优秀的程序员,十分优秀!