使用 jquery 禁用和启用引导开关答案

【问题标题】：disabling and enabling bootstrap switch using jquery使用 jquery 禁用和启用引导开关
【发布时间】：2015-09-12 14:40:49
【问题描述】：

我正在使用引导开关，但目前卡住了，因为没有任何我可以访问的强大文档或示例。

<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 命令是什么。谢谢！

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrap-switch

【解决方案1】：

您可以通过以下多种方式做到这一点：

DEMO

使用选项

类型 1

有初始化

$("[name='my-checkbox']").bootstrapSwitch({
    disabled:true
});

类型 2

初始化后

$("[name='my-checkbox']").bootstrapSwitch(); //initialized somewhere
$("[name='my-checkbox']").bootstrapSwitch('disabled',true);

使用方法

$("[name='my-checkbox']").bootstrapSwitch(); //initialized somewhere
$("[name='my-checkbox']").bootstrapSwitch('toggleDisabled',true,true);

Documentation

【讨论】：

使用后：$("[name='my-checkbox']").bootstrapSwitch('disabled',true); photos.app.goo.gl/z1itgtTMynMfVdYu2
如果您有自定义引导开关（带有图像等），它会恢复为不首选的默认开关。我通过在初始化时禁用它并在需要时重新启用它来解决此问题。

【解决方案2】：

如果你enable 和disable 很多，你也可以编写自己的方法：

$.fn.disable_switch = function() {
  this.bootstrapSwitch('toggleDisabled',true,true);
};

$.fn.enable_switch = function() {
  this.bootstrapSwitch('toggleDisabled',true,true);
};

用法：

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

【讨论】：