标签: bootstrap-switch

我正在使用 bootstrap-switch - v3.3.1，但切换时不需要切换器的默认蓝色轮廓，我设置style="outline: 0 none;了输入但它不起作用。

这是我的html：

            <div class="switch" style="display:inline-block;>
                <input id="accu-switcher" type="checkbox" style="outline: 0 none;" checked data-label-text="TEXT"/>
            </div>

JS：

 $('#accu-switcher').bootstrapSwitch({size: "mini",state: false});
        $('.module .switch').css("visibility","visible");

我正在尝试使用两个外部按钮设置引导开关的状态,这是代码:

    <div>
        <input type="checkbox" name="switch" id="switch" value="1" data-on-text="ON" data-off-text="OFF" />
    </div>

    <div>
        <a id="set_on">ON</a>
        <a id="set_off">OFF</a>
    </div>

<script src="assets/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/bootstrap-switch.js"></script>
<script>
    $("#switch").bootstrapSwitch();
    $( "#set_on" ).click(function() {
        $("#switch").bootstrapSwitch('setState', true);
    });
    $( "#set_off" ).click(function() {
        $("#switch").bootstrapSwitch('setState', false);
    });
</script>

单击按钮ON或OFF开关,不要切换其状态.在浏览器的控制台上查看我读错了: TypeError:$(...).bootstrapSwitch不是函数

如果我尝试以这种方式将引导开关的状态设置在函数外部:

<script>
    $("#switch").bootstrapSwitch();
    $("#switch").bootstrapSwitch('setState', false);
</script>

开关正确切换到ON状态.

我正在使用datatables插件,我的bootstrap开关有问题.这是我的javascript代码,我使用从ajax调用中检索的值创建一个开关:

$(document).ready(function() {
    if ( ! $.fn.DataTable.isDataTable( '#usersTable' ) ) {
        userTable = $('#usersTable').DataTable({
            responsive: true,
            //fix problem with responsive table
            "autoWidth": false,
            "ajax": "table",
            "columns": [
                        { "data": "username" },
                        { data: "enabled", render: function ( data, type, row ) {
                            if (data) {
                                return '<input data="username" type="checkbox" name="my-checkbox" checked>';
                            }
                            else {
                                return '<input data="username" type="checkbox" name="my-checkbox">';
                            }
                        }   
                        },
                        { "data": "role.role"},
                        { "data": "clientVersion.name" },
                        {
                            data: null,
                            className: "center",
                            defaultContent: '<button …

编辑，转到下面

我有一个表，并且每行都有一个行单击事件。问题是我在最后一列中添加了一个开关（“ BootstrapSwitch”），并且该开关不会触发状态更改或单击事件，因为行单击事件与之重叠。我知道该事件有效，因为如果将开关放在其他任何地方也可以。

无论如何，除了一列外，所有行中都有行事件吗？

// Switch event
$('[name="my-checkbox"]').on('switchChange.bootstrapSwitch',  function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

// row click
$(document).on('click','.rowDev', function(e) {
    e.preventDefault();
    // more code
});

编辑

提供的答案应该对我有帮助，但我注意到了另一个问题。触发事件问题。使用JScript向表添加的开关和初始化可能不起作用，因为动态添加的任何开关都可以工作，只是我在.html上手动添加的那些开关

这是我添加到表格中的行

"<td><input class='make-switch' type='checkbox' name='my-checkbox' "+ (!anyUnattendedAlert?"checked ":"")+"data-on-color='success' data-off-color='danger' data-on-text='Si' data-off-text='No'>" +
                                    "</td>"+

当所有行都添加

$("[name='my-checkbox']").bootstrapSwitch();

还尝试初始化我添加的每一行。我一直在尝试其他我没有行事件的表，但仍然没有触发switch事件（事件在下面的注释中提供）。

仍然不知道如何添加这些开关并使其启动。

PD：css和js起作用是因为手动添加的开关会触发事件。

谢谢

我不想听切换开关的事件,而是想用JavaScript来检查它当前的检查状态.

<input type="checkbox" name="pushtoggle" state="true" data-role="none">

我有这个简单的JavaScript来检查选中的值:

if ($('#pushtoggle').is(':checked')){ alert('checked'); } else { alert('not checked');}

无论交换机设置为哪种状态(开启或关闭),我都会收到不检查的警报.

我使用以下方法初始化了切换开关:

$("[name='pushtoggle']").bootstrapSwitch();

我还尝试在输入标记中设置checked属性.没有什么能让我得到正确的开关状态.