使用jQuery禁用和启用Bootstrap开关

Question

我正在使用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命令启用/禁用Bootstrap开关？谢谢！

- user4826347

Answer 1

您可以按以下多种方式完成：

示例

使用选项

类型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);

文档

- Guruprasad J Rao

---

使用以下代码可以禁用复选框： $("[name='my-checkbox']").bootstrapSwitch('disabled',true); https://photos.app.goo.gl/z1itgtTMynMfVdYu2 - Marc Roussel

如果您有自定义的bootstrap-switch（带有图像等），它会恢复到默认开关，这是不理想的。我通过在初始化时禁用它，然后在需要时重新启用它来解决了这个问题。 - Roland

Answer 2

如果您经常需要启用和禁用，您也可以编写自己的方法：

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

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

使用方法：

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

- Jeremy Lynch