jquery - 禁用 jquery 上的单选按钮
问题描述
我想通过双击单选按钮的相同元素来实现清除选择的选项。但我不明白
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap
.min.css">
</head>
<body>
<div class="col">
<div class="btn-group btn-group-toggle" >
<label class="btn btn-outline-primary">
<input type="radio" >1</label>
<label class="btn btn-outline-primary">
<input type="radio" > 2</label>
<label class="btn btn-outline-primary" >
<input type="radio" > 3</label>
</div>
<br>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/
umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/
bootstrap.min.js"></script>
<script >
$('.btn-group').on('click', '.btn', function() {
$(this).addClass('active').siblings().removeClass('active');
});
解决方案
像这样的东西?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="col">
<div class="btn-group btn-group-toggle" ><label class="btn btn-outline-primary"><input type="radio" >1</label><label class="btn btn-outline-primary"><input type="radio" > 2</label><label class="btn btn-outline-primary" ><input type="radio" > 3</label></div>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/ umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/ bootstrap.min.js"></script>
<script>// Single click - Select and deselect all buttons
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
// Double click - Deselect button
$('.btn').dblclick(function(){
$(this).removeClass('active');
});
</script>
</body>
</html>
使用 click 和 dblclick 方法;
推荐阅读
- python - 用线连接抖动的数据点 - seaborn python
- reactjs - 如何使用屏蔽输入添加 antd datepicker
- java - `Thread.checkAccess()` 是 `Thread.suspend()` 的合适替代品吗?
- c# - 尝试添加浏览图片时弹出错误消息但代码正确
- wordpress - 同一个 Docker 容器上的多个域
- c# - 在 C# 上需要某种无穷无尽的泛型类型方法
- ios - 如何检查 iPad 上是否禁用了“允许多个应用程序”?
- r - 我们可以使用 testthat 和 usethis 检查闪亮的应用程序吗
- session-cookies - SPO 提供程序托管的客户端 Web 部件不存储会话 cookie
- excel - EXCEL - 条件格式(2 个公式,一个单元格)