0

HTMLで以下のコードでブートストラップスイッチを使用しようとしていますが、

<input type="checkbox" id="queue_status" checked class="make-switch" data-size="small" data-off-text="Disable" data-on-text="Enable" checked data-on-color="success" data-off-color="warning">

しかし、これは値として「true」または「false」を返します。

カスタム値を選択として取得するにはどうすればよいですか? 上記のようにスイッチを選択して有効または無効にしますか？

4

1 に答える 1

0

少し変更を加えることで、ブートストラップスイッチプラグイン（私はv3.3.2を使用しました）を目的に合わせて調整できます（注意-副作用が発生する可能性があります）：

から：

$.fn.bootstrapSwitch = function() {
  var args, option, ret;
  option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
  ret = this;
  this.each(function() {
    var $this, data;
    $this = $(this);
    data = $this.data("bootstrap-switch");
    if (!data) {
      $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
    }
    if (typeof option === "string") {
      return ret = data[option].apply(data, args);
    }
  });
  return ret;
};

に：

$.fn.bootstrapSwitch = function() {
  var args, option, ret;
  option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
  ret = this;
  this.each(function() {
    var $this, data;
    $this = $(this);
    data = $this.data("bootstrap-switch");
    if (!data) {
      $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
    }
    if (typeof option === "string") {
        //this section was modified (start)!
        var temp = data[option].apply(data, args);            
        return ret = option == 'state' ? data[temp ? 'onText' : 'offText'].apply(data, args) : temp;
        //this section was modified (end)!
    }
  });
  return ret;
};

実装：

var res = $('#mycheckbox').bootstrapSwitch('state');
//res == 'Enable' or 'Disable'

PS一度だけ使用する場合は、これを簡単に実行できます（プラグインを変更する必要はありません）：

var element = $('#mycheckbox');
var res = element.bootstrapSwitch(element.bootstrapSwitch('state') ? 'onText' : 'offText');
于 2016-02-19T13:04:48.463 に答える