标签: bootstrap-switch

我正在使用自举开关,目前卡住,因为没有任何强大的文档或示例,我可以访问.

<div class="col-xs-6">
  <div class="pull-left">
     <input class="switch" type="checkbox" id="cb_project_status"  name="cb_project_status" 
        <?php if($data_p_projectstatus=="ACTIVE") echo("checked"); else echo("");?> 
        data-on-color="success" data-off-text="Inactive" data-on-text="Active" 
        data-off-color="warning" data-size="mini" disabled>
     </div> 
 </div>

关于js文件的文件准备,我这样做

$("#cb_project_status").bootstrapSwitch();

并已附加在PHP页面中

 <link rel="stylesheet" href="css/bootstrap-switch.min.css">

我需要实现以下功能:除非用户输入所有必填字段,否则需要禁用切换按钮.

if($.fn.validateFormInputs()){
   // enable bootstrap switch
}else{
   // disable bootstrap switch
}

什么是启用/禁用引导切换的jQuery命令.谢谢!

如何将自举开关颜色自定义为所需颜色？

我发现了一个oncolor,offcolor但不知道如何改变它们.

我正在使用twitter bootstrap-switch插件显示一个带有两个选项的复选框.它适用于带有小标签文本的复选框,如"是/否".但是,当涉及更大的标签文本(如"正常/异常")时,部分文本对用户不可见.

我试图使用该data_size属性:

@Html.CheckBoxFor(model => Model.keyitems[i].Status,
                  new { @checked = "checked",
                        @data_on_text = "Normal",
                        @data_off_text = "Abnormal",
                        @data_size = "switch-large" })

但它没有用.

如何让插件支持更长的文本？

我正在使用Bootstrap Switch插件和Bootstrap Modal.用户单击以将"切换"更改on为off"模态"框后,请求确认.

如何在交换机从更改on到off或off到on用户点击确认按钮后,才？如果用户单击"取消",则交换机应返回Off状态.

我的代码

$("#myswitch").bootstrapSwitch();

$('#myswitch').on('switchChange.bootstrapSwitch', function (e, data) {

    $('#showModal').modal({
     backdrop: 'static',
     keyboard: false
 });
});

I am new at coding with bootstrap and jquery. how can i disable bootstrap switch in "onswitchchange" method option

Here my javascript/jquery code:

$("input[type=checkbox]").bootstrapSwitch({
    size:"mini",
    onSwitchChange:function(event, state) {
      this.disabled = true; //checkbox change into disabled
    }
  });

i also tried to change this.disabled = true into $(this).setDisabled(true); and it returning error of course. i just want to know how to call setDisable method inside onswitchchange method. if it cannot be like that. is there any other way to disable the …

我试图用Ajax中的条件返回值来改变bootstrap开关的状态,

HTML,

<input type="checkbox" id="limit" class="make-switch"  data-on-text="Yes" data-off-text="No" data-on="success" data-on-color="success" data-off-color="danger" data-size="small">

<input type="text" name="limit_amount" id="limit_amount" autocomplete="off"  class="form-control"  readonly>


if(objData.limit === 'Yes')
{
  $('#limit').bootstrapSwitch('setState', true);
  $("#limit_amount").prop("readonly", false);
}
else {
    $('#limit').bootstrapSwitch('setState', false);
    $("#limit_amount").prop("readonly", true);
}

但是它会抛出如下错误.未捕获的TypeError:无法读取未定义的属性'apply'

Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement.<anonymous> (bootstrap-switch.min.js:22)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.e.fn.bootstrapSwitch (bootstrap-switch.min.js:22)
at Object.success (limitingcat.js:311)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)

这个错误的错误是什么？

我有一些带有bootstrapSwitch. 我写了一个脚本，当 bootstrapSwitchstate为真时，必须将复选框的值添加到数组中。

这是我的代码：

$('input[name^=skill]').on('switchChange.bootstrapSwitch', function (event, state) {

    //alert(state);
    //var s = [];

    var s = new Array();

    if( state === true )
    {
        //var value = $(this).val();
        s.push( $(this).val() );

        console.log(s);//(value)

    }

        console.log(s);//(value)
});

但令人惊讶的是push方法替换了值，我的s数组总是有一个索引。

你能告诉我这是为什么吗？

提前致谢

我正在尝试将引导开关添加到 Rails 项目中。当我从这里添加脚本时，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js" data-turbolinks-track="true"></script>

我最终在控制台中收到错误：

Uncaught TypeError: Cannot read property 'fn' of undefined
    at bootstrap-switch.js:743
    at bootstrap-switch.js:19
    at bootstrap-switch.js:22

突出显示为红色的 fn 问题如下：

$.fn.bootstrapSwitch = function (option) {
    for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
      args[_key2 - 1] = arguments[_key2];
    }

有什么想法为什么没有找到吗？或者有人有我可以使用的 bootstrap-switch.js 文件的链接吗？

谢谢！

我还尝试使用bootstrap-switch gem，但这给了我一个不同的错误。

我正在使用这个bootstrap开关库.

我的html中有一个复选框.现在,它始终显示在OFF状态,即使在加载文档时其checked属性设置为true.

除此之外我还需要做什么？

编辑 - 据我所知,Switch正在bootstrap-switch-off默认情况下使用类在输入类型复选框字段周围添加一个容器,而不管使用复选框字段选中的checked属性的值.

<input type="checkbox" name="my-custom" id="Switch" checked="true">

我正试图将一个复选框变成一个Bootstrap Switch.它在IE中运行良好,但在Chrome中没有正确设置样式.出了什么问题？

如果我从网站上简单地下载bootstrap-switch代码,它甚至会发生.在vs 2013中创建一个新的空Web应用程序添加整个内容并在浏览器中点击预览.(examples.html)

铬的情况也是如此.

<html lang="en">
<head>
  <link href="content/template/css/bootstrap.min.css" rel="stylesheet">
  <link href="content/template/bootstrap-switch.css" rel="stylesheet">
</head>
<body>
  <input type="checkbox" name="my-checkbox" checked>
  <script src="Scripts/jquery-2.1.1.js"></script>
  <script src="scripts/js/bootstrap-switch.min.js"></script>
  <script>
     $(document).ready(function () {
        $("[name='my-checkbox']").bootstrapSwitch();
     });
  </script>
</body>
</html>