Bootstrap Toggle：将多个复选框的切换状态设置为“关闭”

Posted 2023-03-05

【中文标题】Bootstrap Toggle：将多个复选框的切换状态设置为“关闭”

【英文标题】：Bootstrap Toggle: Setting the toggle state of multiple checkbox to 'Off'

【发布时间】：2015-12-16 00:22:44

【问题描述】：

我正在使用Bootstrap Toggle 插件，它将复选框转换为切换按钮。

<input type="checkbox" id="c1" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small" data-onstyle="success">
<input type="checkbox" id="c2" data-toggle="toggle" data-on="Style" data-off="Style" data-size="small" data-onstyle="success">
<input type="checkbox" id="c3" data-toggle="toggle" data-on="Border" data-off="Border" data-size="small" data-onstyle="success">

它运行良好，但在将复选框状态设置为关闭/未选中时出现问题。

就像我们在复选框上使用的一样：

$("#c1,#c2,#c3").prop('checked', false);

根据文档 Bootstrap Toggle 插件使用功能“关闭”来关闭但这不起作用：

$("#c1,#c2,#c3").bootstrapToggle('off');

而

$("#c1,#c2,#c3").bootstrapToggle('disable');

有效并禁用所有三个复选框。

但我不想禁用，只需以编程方式关闭所有切换按钮。尝试使用每一行单独的代码：

$("#c1").bootstrapToggle('off'); 
$("#c2").bootstrapToggle('off');
$("#c3").bootstrapToggle('off');

但只有一个（第一个元素）被关闭，然后我的下一个脚本停止。

附言

我在另一个函数中使用了这个关闭函数：

    function reset_all()
       // other fields resets
       // input default values to reset
       // hide select options & other fields
       $("#c1,#c2,#c3").bootstrapToggle('off');
    

点击重置按钮应该可以工作：

$('#btnReset').on("click",function(e)
        e.preventDefault();
        reset_all();
       // alert message display 
      // 
);

插件中存在一些错误？或者我的代码有问题！

编辑

我刚刚发现这个功能在复选框打开时有效但是当这些复选框已经处于关闭状态时停止工作。

即复选框在设置为 ON 时关闭，但当它们已经关闭并且我运行 bootstrapToggle('off') 函数时，它会停止下一个代码。

我如何检测哪个复选框被“打开”并且只有该复选框被“关闭”并且如果所有选项都打开则全部关闭。

【问题讨论】：

似乎工作正常。 jsfiddle.net/isherwood/e5Lg47fz

控制台出错了？

我在另一个函数中使用了这个关闭代码：函数 reset_all() ，它在单击重置按钮时起作用，就像我们用来将所有表单元素和表单值重置为默认值一样。然后 $('#btnReset').on("click",function(e) reset_all(); )

感谢@isherwood，我将 bootstrapToggle('off') 代码移到了 On Reset 按钮单击功能，而不是 reset_all() 现在它可以工作了。为什么不在 reset_all 函数调用下工作？如果我想在执行期间再次调用 reset_all 函数，它很有用。

我看不出有什么理由行不通。你还没有回答我的问题。

【参考方案1】：

在您的事件调用结束时更改（），就像我一样。

$("#c1,#c2,#c3").prop('checked', false).change();