オンスイッチ変更後にブートストラップスイッチを無効にする

Question

ブートストラップとjqueryでコーディングする際に新しい。どのように私はここで、「onswitchchange」メソッドオプション

にブートストラップスイッチを無効にすることができ、私のjavascript/jqueryのコード：

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

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

Answer 1

UPDATE：ブートストラップ・スイッチを使用している場合、あなたは2つの機能のいずれかを使用することができます

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

あります：あなたのonSwitchChangeハンドラでそう

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

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

を、あなたはbootstrapSwitch("disabled", true)メソッドを使用することができますそれが変更されたときのハンドラにあるように、 "トグル"には本当の意味がありません。

---

前の答え - あなたはdisabledにフォーム要素を設定したい場合は要素

を無効にするには、jQueryのを使用したい人のために、あなたはそのdisabled属性を宣言する必要があります。

宣言したばかりのtrueに設定するか、disabledに設定するかは、議論の余地があります。

個人的に（そして最も好ましい/互換性がある）はdisabled=disabledに設定されます。

---

、あなたがattr()機能使用できるjQueryのを使用して属性要素を設定するには（最初の引数は、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：https://stackoverflow.com/a/7357314/6240567

---

EDIT：上記のコードはcheckboxのみを無効/読み取り専用にしています。コンテナなどの要素を無効にするには、.closest()セレクタを使用する必要があります。

トップセレクタの先端、およびどれ以下のものが必要です。要素の

• div試合タイプ - それはdiv要素を選択し、この場合には。クラスの
• .some-class一致 - この場合はクラスとして、要素のid上
• #someIdマッチ「some-class」を持っている任意の要素 - この場合には、それは「someId」のid

で要素を選択しますそれで、無効にしたいclosest要素（またはそのコンテナ）を選択することができます

例：

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

これが役に立ちます。 :)