Bootstrap设置按钮禁用
2024-08-23 22:36:13
在Bootstrap中,按钮可以使用button标签或者a标签。设置按钮禁用可以通过两种方式,一种是通用CSS样式,一种是用过JS脚本动态设置,下面举例说明!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap设置按钮禁用</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$('#btn1').addClass('disabled'); //禁用 --变灰,依然可以调用点击事件
$('#btn1').click(function() {
alert('新增,复活了!');
}); $('#btn2').prop('disabled', true); //禁用 --变灰,且不能调用点击事件
$('#btn2').click(function() {
alert('删除,复活了!');
}); $('#btn3').click(function() {
$('#btn1').removeClass('disabled'); //启用
}); $('#btn4').click(function() {
$('#btn2').prop('disabled', false); //启用
})
});
</script>
</head>
<body> <div class="container">
<h2>按钮</h2>
<p> .btn-default 类是默认/标准按钮样式:</p>
<!-- 方法一:CSS样式 -->
<!-- <button type="button" class="btn btn-default disabled">默认</button> --> <!-- 方法二:JS脚本 -->
<button id="btn1" type="button" class="btn btn-default">新增</button>
<button id="btn2" type="button" class="btn btn-default">删除</button>
<button id="btn3" type="button" class="btn btn-default">启用新增</button>
<button id="btn4" type="button" class="btn btn-default">启用删除</button>
</div> </body>
</html>
最新文章
- 《分布式事务解决之道》沙龙ppt共享
- 【php】命名空间 和 自动加载的关系
- SQL语句中如何把文件以二进制数组形式存入数据库
- iOS9 判断微信qq是否安装
- UIView中常见的方法总结
- Keys of HashMap in Java
- java.lang.ClassNotFoundException: org.apache.struts.action.ActionServlet
- debugger 调试的一些经验
- 老李分享: 并行计算基础&;编程模型与工具
- 小结:Swift、OC语言中多target在代码中如何区分
- github与git之间怎么建立连接
- dedecms利用memberlist标签调用自定义会员模型的会员信息
- html之CSS样式学习笔记
- Mac 建PHP 环境 及 配置 apache 默认目录
- WebSocket原理与实践(三)--解析数据帧
- Linux内核及分析 第一周 计算机是如何工作的?
- python - isinstance/issubclass 函数
- Educational Codeforces Round 51 F. The Shortest Statement(lca+最短路)
- Ubuntu17安装MySql5.7
- MyBatis 支持的扩展点(version:3.2.7)
热门文章
- Grunt:GruntFile.js
- nginx web端口映射
- shell里的` ` $( ) ${ } expr $(( ))
- <;正则吃饺子>; :关于 Matcher 的 replaceAll 的简单使用
- WPF命令使用
- 4-数组、指针与字符串1.3-this指针
- gin-swagger包Api文档生成, Post请求参数无法接收, 问题修复。
- matlab新手入门(二)(翻译)
- socket网络编程实践要点
- CodeForces - 820