jquery - 无法刷新单选按钮 Bootstrap 3
问题描述
发送表格后,我想“清理”但取消选择之前选择的选项。
这是收音机:
<div class="btn-group" id="btnRadio" data-toggle="buttons">
<label class="btn btn-default btn-sm">
<span style="color: green;">
<i class="fas fa-smile-beam"></i>
</span>
<input type="radio" name="radio1" id="idRadioBien"> Bien
</label>
<label class="btn btn-default btn-sm">
<i class="far fa-meh"></i>
</span>
<input type="radio" name="radio1" id="idRadioNormal"> Normal
</label>
<label class="btn btn-default btn-sm">
<span style="color: Tomato;">
<i class="fas fa-sad-tear"></i>
</span>
<input type="radio" name="radio1" id="idRadioMal"> Mal
</label>
</div>
我无法“取消选择”用户选择的收音机。
在检查了其他 Stack Overflow 问题后,我尝试使用以下内容“刷新”集合:
$('input:radio')
.removeAttr('checked')
.removeAttr('selected')
.button("refresh");
但仍然没有运气。它保持这样的选择:
解决方案
当您单击任何单选按钮时,active
类将添加到其标签中。因此,要从单选中删除选中,您还需要active
从标签标签中删除该类。
演示代码:
$(document).ready(function() {
$('[data-toggle="buttons"] :radio').prop('checked', false); //remove checked if any
$('[data-toggle="buttons"] label').removeClass('active'); //remove active class from label
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css" integrity="sha512-OdEXQYCOldjqUEsuMKsZRj93Ht23QRlhIb8E/X0sbwZhme8eUw6g8q7AdxGJKakcBbv7+/PX0Gc2btf7Ru8cZA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="btn-group" id="btnRadio" data-toggle="buttons">
<label class="btn btn-default btn-sm active">
<span style="color: green;">
<i class="fas fa-smile-beam"></i>
</span>
<input type="radio" name="radio1" id="idRadioBien" checked> Bien
</label>
<label class="btn btn-default btn-sm">
<span style="">
<i class="far fa-meh"></i>
</span>
<input type="radio" name="radio1" id="idRadioNormal"> Normal
</label>
<label class="btn btn-default btn-sm">
<span style="color: Tomato;">
<i class="fas fa-sad-tear"></i>
</span>
<input type="radio" name="radio1" id="idRadioMal"> Mal
</label>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
推荐阅读
- docker - 为什么 Kibana 将 JSON 日志打印到 Dokku?
- ruby-on-rails - 如何在启动后根据指定时间自动停止 EC2 实例?
- python - 身份证和包装识别
- elasticsearch - “index_already_exists_exception” - kafka 到 Elastic Search(SSL)
- java - 为什么我没有在“外部库”中看到我的依赖项?
- javascript - Vue.js 单元测试最佳实践
- javascript - 检查密钥在javascript中是否有价值
- yii2 - DetailView 中的 Yii2 进度条
- javascript - 在 Highchart 中解析数据
- sql - SQL Server UPDATE 来自另一个表的列值的列值