需要使用Bootstrap switch,实现通过、拒绝功能并且在开关至拒绝时,显示textarea框输入原因。
1、css引用
<link href="switch/css/bootstrap-switch.min.css" rel="stylesheet">
2、js引用
<script src="switch/js/bootstrap-switch.min.js"></script>
3、页面(使用modal打开,若须使用需引用对应的js和css)
<div class="col-lg-1">
<a id="" class="btn btn-danger btn-facebook animation_select" data-toggle="modal" data-target="#approve_modal">审批</a>
</div>
<!--审批modal-->
<div class="modal inmodal" id="approve_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
<h1 class="modal-title">审 批</h1>
<br>
<input type="checkbox" name="my-checkbox" id="my-checkbox">
</div>
<div class="modal-body">
<div class="form-group animated fadeIn" id="approve_input" style="display:none;"><label style="font-size: 15px;">若不通过,请说明原因:</label> <textarea id="approve_area" rows="5" placeholder="填写内容请控制在250字以内。" class="form-control" maxlength="250">
Bootstrap switch 开关事件处理
猜你喜欢
转载自blog.51cto.com/bilibili/2133343
今日推荐
周排行