jQuery、ページの読み込み時にチェックボックスを使用して<select>要素を無効または有効にする方法

Question

私は、チェックボックスのチェック/チェックを外したときにselect要素を無効/有効にする単純な機能を持っています。それはうまくいく。しかし、フォームが提出され、チェックボックスが既にチェックされている場合（PHPの助けを借りて）チェックボックスを2回クリックするまで、選択は無効になりません。私はいくつかのことを試してみました

<select id="worldSelect" class="select" name="world"> 
<input id="worldcb" type="checkbox" checked="yes" value="any" name="world"> 
any world 

function toggleSelection(element){ 
    if (this.checked) { 
     $(element.data).attr('disabled', 'disabled'); 
    } else { 
     $(element.data).removeAttr('disabled'); 
    } 
} 

$(function() { 
    $('#worldcb').click('#worldSelect', toggleSelection); 
}); 

あなたは、ほとんどがあったように、しかし、私はjQueryを使って何か良いじゃない、これまで...

Answer 1

が見えます。構文エラーのちょうど2つ。

$("#worldcb").click(function(){ 
    var el = $("#worldSelect"); 
    if (el){ 
     el.removeAttr("disabled"); 
     if (this.checked){ 
      el.attr("disabled", "disabled");  
     } 
    } 
});   

ここに示すのはjsFiddleです。

ページがポストバックされたときに無効状態を保持するためには、ページが読み込まれるときに何らかのロジックを実行する必要があります。

if ($("#worldcb").is(":checked")){ 
    $("#worldSelect").attr("disabled", "disabled"); 
} 

Answer 2

ページが読み込まれたときに常に無効にする場合は、disabledプロパティをselect html要素に追加します。

<select id="worldSelect" class="select" name="world" disabled></select> 

Answer 3

まあ一番簡単な方法は、そのチェックボックスの状態を確認します準備ができて、そのたびにページがロードを文書化するために、あなたのtoggleFunctionをasigning、および選択の正しい表示されます。特定のフォームフィールドにautocomplete = "off"属性を与えて、キャッシュしないようにすることができます（したがって、ページの更新後にチェックボックスはオフになります）。

例：

$(document).ready(function() { 
    toggleSelection('#worldcb'); 
}); 

Answer 4

さてあなたは、負荷に2を同期する必要があります。また、toggleSelectionを変更して、イベントハンドラまたはスタンドアロンとして動作するようにしてください。

function toggleSelection(element, scope){ 
    scope = scope || this; 
    if (scope.checked) { 
     $(element.data).attr('disabled', 'disabled'); 
    } else { 
     $(element.data).removeAttr('disabled'); 
    } 
} 

$(function() { 
    $('#worldcb').click('#worldSelect', toggleSelection); 
    toggleSelection({ data : '#worldSelect' }, document.querySelector('#worldcb')); 
});