5

私はブートストラップとjqueryを使ったコーディングが初めてです。「onswitchchange」メソッド オプションでブートストラップ スイッチを無効にするにはどうすればよいですか

ここに私のjavascript/jqueryコード：

$("input[type=checkbox]").bootstrapSwitch({
    size:"mini",
    onSwitchChange:function(event, state) {
      this.disabled = true; //checkbox change into disabled
    }
  });

私も変更しようとしthis.disabled = trueまし$(this).setDisabled(true);たが、もちろんエラーを返します。setDisableメソッド内でメソッドを呼び出す方法を知りたいだけですonswitchchange。そんなことありえないと。変更/クリックした後にスイッチを無効にする他の方法はありますか?

4

1 に答える 1

3

更新:ブートストラップ スイッチを使用する場合、次の 2 つの関数のいずれかを使用できます。

$(this).bootstrapSwitch("toggleDisabled"); // toggles whether `this` is disabled

$(this).bootstrapSwitch("disabled",true); // just disables the `this` element

したがって、ハンドラーで次のメソッドonSwitchChangeを使用できます。bootstrapSwitch("disabled", true)

onSwitchChange:function(event, state) {
  $(this).bootstrapSwitch('disabled', true);
}

「トグル」は、いつ変更されるかのハンドラーにあるため、実際の意味はありません。無効になっている場合は、再度変更する必要はありません。

前の回答 - jQuery を使用して要素を無効にしたい人向け

フォーム要素を に設定する場合は、その属性disabledを宣言する必要があります。disabled

trueこれを に設定するか、単に宣言するか、に設定するかについては議論がありますdisabled。

個人的に（そして最も有利/互換性があるのは）設定することdisabled=disabledです。

jQuery を使用して要素の属性を設定するには、次のattr()関数を使用できます(最初の引数は属性、2 番目の引数は値) :

onSwitchChange:function(event, state) {
  $(this).attr('disabled', 'disabled'); // set the element's disabled attribute
}

注:チェックボックスを無効にしているため、これはその値が . で投稿されないことを意味しますform。

値をフォームで POST する必要がある場合は、属性を使用して次readonlyのように設定しますreadonly。

onSwitchChange:function(event, state) {
  $(this).attr('readonly', 'readonly'); //checkbox is readonly, but still POSTed 
}

と の違いを説明する素晴らしい答えはdisabled次のreadonlyとおりです。

EDIT：上記のコードは、checkboxそれ自体を無効/読み取り専用にするだけです。コンテナーまたはその中の他の要素を無効にするには、.closest()セレクターを使用する必要があります。

セレクターに関する重要なヒントと、必要なセレクター:

  • div要素タイプに一致します- この場合、div要素を選択します。
  • .some-classクラスで一致 - この場合some-class、クラスとして " "を持つすべての要素
  • #someId要素の一致id- この場合、id" someId"の要素を選択します。

closestそうは言っても、無効にしたい要素（またはそのコンテナ）を選択できます

例えば：

  // set the checkbox's closest element with "bootstrapSwitch" class, to disabled
  $(this).closest('.bootstrapSwitch').attr('disabled', 'disabled');

お役に立てれば！:)

于 2016-08-27T15:35:25.580 に答える