为什么禁用属性在 Bootstrap-select 上不起作用？答案

【问题标题】：Why doesn't disable attribute work on Bootstrap-select?为什么禁用属性在 Bootstrap-select 上不起作用？
【发布时间】：2013-11-17 20:56:51
【问题描述】：

我想为我的网站表单、输入和选择设置样式。我将Bootstrap 用于输入，Bootstrap-select 用于选择，iCheck 用于复选框。问题是 iCheck 不能与 Bootstrap-select 一起正常工作。

这里是 jsFiddle 测试：http://jsfiddle.net/36Xpf/

现在，尝试选中 iCheck 复选框，bootstrap-select 的选择不会被禁用。然后勾选标准方形复选框，bootstrap的选择将被禁用。

如果使用 jQuery .change() 选中复选框，我会禁用该属性来选择：

$('#checkbox1').change(function(){
  if (this.checked) {
    $('.selectpicker').attr('disabled', false);
  } else {
    $('.selectpicker').attr('disabled', true);
  }                   
});

我做错了什么？为什么 disabled 属性在引导选择上不起作用？
任何帮助表示赞赏！谢谢！

【问题讨论】：

标签： jquery twitter-bootstrap icheck bootstrap-select

【解决方案1】：

这是一个插件，而不是常规复选框，您必须监听它实际支持的事件：

$('#checkbox1').on('ifChanged', function(){
    $('.selectpicker').attr('disabled', this.checked).selectpicker('refresh');
}).iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red' 
});

FIDDLE

【讨论】：

@charlietfl - 谢谢，这很酷，我从未使用过 selectpicker，我总是只创建自己的下拉菜单。也从未使用过 iCheck，但阅读文档所有事件以及如何处理它们似乎都有很好的记录。
@adeno 也从未见过他们中的任何一个...刚刚看到refresh 方法，并且直接更改原始选择的属性需要刷新
@charlietfl - 将其添加到答案中，侦听正确的事件似乎禁用下拉菜单，但刷新方法也将其样式更改为看起来已禁用，所以很好。
我终于找到了无需脚本即可完成复选框或收音机的最简单方法。看看这些 css...没有在页面上使用脚本 topcoat.io/topcoat/#checkbox :after 的创造性使用
@charlietfl - 我以前见过的面漆，看起来不错，但是焦点上的蓝色轮廓使我无法在最近的项目中使用它，而是选择了 Bootstrap。

【解决方案2】：

    $('input#checkbox1').iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red' 
});
$('.selectpicker').selectpicker();


$(document).on('ifChecked','#checkbox1',function(){
      $('.selectpicker').prop('disabled',true);
     $('.selectpicker').selectpicker('refresh');
});
$(document).on('ifUnchecked','#checkbox1',function(){
     $('.selectpicker').prop('disabled',false);
     $('.selectpicker').selectpicker('refresh');
});


/*standard checkbox*/
$('#checkbox2').change(function(){
  if (this.checked) {
    $('.standard').attr('disabled', true);
  } else {
    $('.standard').attr('disabled', false);
  }                   
});

使用这个js代码

【讨论】：