5

このブートストラップ スイッチ ライブラリを使用しています。

HTMLにチェックボックスがあります。現在、ドキュメントがロードされたときにcheckedプロパティがtrueに設定されていても、常にオフの状態で表示されます。

それ以外に何をする必要がありますか？

編集-私が理解しているのは、チェックボックスフィールドbootstrap-switch-offで使用されるchecked属性の値に関係なく、スイッチはデフォルトでクラスを持つ入力タイプチェックボックスフィールドの周りにコンテナを追加していることです。

<input type="checkbox" name="my-custom" id="Switch" checked="true">
4

2 に答える 2

12

checkedこれはブール属性であることに注意してください。つまり、その存在だけで適用されるかどうかが決まります。HTML5 では、空の属性構文をcheckedまたはとして使用できますが、実際に何かを行うことを意味するので、checked=""使用しないように注意します。一方、同等に有効です。checked="true"checked="false"checked='potato'

次のコードは、チェックボックスをデフォルトでオンまたはオフにして、ブートストラップ スイッチを初期化する必要があります。

<input type="checkbox" class="switch" checked /> <!-- on  -->
<input type="checkbox" class="switch" />         <!-- off -->

$("input.switch").bootstrapSwitch();

スクリーンショット

スタック スニペットとjsFiddleでの動作デモ

$("input.switch").bootstrapSwitch();
body { padding: 15px; }
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css">

<div >
    <label for="chk1">Default On:</label>
    <input type="checkbox" class="switch" id="chk1" checked />
</div>

<div>
    <label for="chk2">Default Off:</label>
    <input type="checkbox" class="switch" id="chk2" />
</div>

参考文献

于 2014-07-02T15:19:48.413 に答える
0

この問題を解決しましたが、それは単純なものでした。

handleChange 関数に「イベント」を追加する必要がありました

handleChange: function (event, state) {
      console.log(state);
      this.setState({storyStatus: state});
  },
于 2015-12-22T15:49:40.070 に答える