jquery - 禁用引导开关 html 元素而不切换状态
问题描述
我有一个如下定义的切换。
<input type="checkbox"
id="statusToggler"
class="form-control switch conf-switch-state"
data-label-text="Status"
checked="true"
data-inverse="true"
data-size="small"
data-off-color="warning"
data-on-text="Active"
data-off-text="Disabled">
我正在使用 boostrap 开关来显示一个切换它的弹出窗口。我想在显示确认弹出窗口以更改状态之前禁用输入元素。我已经尝试了所有方法,但是在尝试禁用元素时切换的状态也会发生变化。这是我的代码。
$("input.conf-switch-state").bootstrapSwitch();
$('input.conf-switch-state').on('switchChange.bootstrapSwitch', function (e, data) {
$(this).bootstrapSwitch("disabled",true);
$(this).bootstrapSwitch('state', !data, true);
...
..
});
这是我提到的解决方案。https://stackoverflow.com/a/39182836/6554834
下面给出的是使用引导开关后呈现的最终 html。
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-small bootstrap-switch-inverse bootstrap-switch-id-hellohello bootstrap-switch-animate" style="width: 116px;">
<div class="bootstrap-switch-container" style="width: 170px; margin-left: -56px;">
<span class="bootstrap-switch-handle-off bootstrap-switch-warning" style="width: 56px;">Disabled</span>
<span class="bootstrap-switch-label" style="width: 58px;">Status</span>
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 56px;">Active</span>
<input type="checkbox" name="confStatus" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled">
</div>
</div>
解决方案
你可以试试这段代码。我指定了元素 ID,以便函数不会被误导。
如果问题仍然存在,请告诉我。我很乐意帮助你。
$('#statusToggler').bootstrapSwitch('disabled', true);
你可以参考这个代码片段
$(function() {
$("input.conf-switch-state").bootstrapSwitch({
onSwitchChange: function(event, state) {
alert('This is a sample notification');
$(this).bootstrapSwitch('disabled', true);
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-switch@3.3.4/dist/js/bootstrap-switch.js"></script>
<link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet" />
<div>
<input type="checkbox" id="statusToggler" class="form-control switch conf-switch-state" data-label-text="Status" checked="true" data-inverse="true" data-size="small" data-off-color="warning" data-on-text="Active" data-off-text="Disabled">
推荐阅读
- angular - 如何从应用程序在自定义角度库中设置路由
- javascript - Flutter Web,奇怪的文本问题,附上图片
- c# - PackageIcon 和 PackageIconUrl 在 dotnet build 中都不起作用
- node.js - 当我们在nodejs中使用mongoose从mongodb中选择复杂对象时,有没有办法重命名路径?
- javascript - 如何在 AWS lambda 代码中为 S3 指定目录、权限和创建子目录?
- c++ - 如何向 Dobot 发送持续指示?
- c# - 如何同时运行控制台和表单?C#
- java - `Future` 任务完成后检查字段是否安全?
- lodash - 查找数组索引失败
- java - Java 电源模拟单元测试具有 Thread.Sleep 的方法