Bootstrap从不确定状态切换

问题描述 投票:0回答:1

从这个小提琴开始:

https://jsfiddle.net/okuem1fb/

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status pt2">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

$('.alert-status').bootstrapSwitch('state', true);
$(".alert-status pt2").attr('data-indeterminate', 'true');
$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
   alert($(this).data('checkbox'));
});

从不确定状态开始,按钮会根据您单击的一侧做出反应:单击“打开”,开关转到“关闭”。单击“关闭”,开关转到“开”。

我想改变这一点,当我点击'开'的一侧时,我实际上期望它进入'开'状态,反之亦然'关'...

此外,当从不确定状态单击“关闭”时,使用的事件不会触发...

有关如何改变这一点的任何想法?

switch-statement state angularjs-bootstrap
1个回答
0
投票

我希望自那以后找到解决方案......

对于处于相同情况的人来说,这是解决方案。有必要修改js文件(bootstrap-switch.js)并找到对应的行:

key: '_handleHandlers',
  value: function _handleHandlers() {
    var _this6 = this;

    this.$on.on('click.bootstrapSwitch', function (event) {
      event.preventDefault();
      event.stopPropagation();
      _this6.state(true); //--> _this6.state(false);
      return _this6.$element.trigger('focus.bootstrapSwitch');
    });
    return this.$off.on('click.bootstrapSwitch', function (event) {
      event.preventDefault();
      event.stopPropagation();
      _this6.state(false); //--> _this6.state(true);
      return _this6.$element.trigger('focus.bootstrapSwitch');
    });
  }

当你点击“开”时,这将修改开关“开”,当点击另一侧时,将开启“关闭”。你可以用同样的方式修改缩小的文件(juste必须找到要修改的特定位置)...

对于change事件,在初始化之后,必须将switch状态设置为null:

$("#my-switch").bootstrapSwitch({
    indeterminate: true,
    state: null
});

这已在Github上讨论过:qazxsw poi(带有相应的JSFiddle:qazxsw poi)

© www.soinside.com 2019 - 2024. All rights reserved.