jQuery onchangeイベントがページリロードで機能しない

Question

jqueryを使用して、選択したドロップダウンに基づいて他のドロップダウンを無効にしています。 以下はそのコードです。

<script type="text/javascript" > 
jQuery(function() { 
jQuery('select').change(function() { 
    if(jQuery(this).val() == "A"){ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
      .attr('disabled','disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .removeAttr('disabled'); 
    } else if(jQuery(this).val() == "R"){ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .attr('disabled','disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .attr('disabled','disabled'); 
    }else{ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .removeAttr('disabled'); 
    } 
}) 
}) 
</script> 

ページがリロードされた後、無効になっているフィールドは再度有効になりますが、そのフィールドが無効になるように選択されています。

助けてください！

おかげ Sanket

Answer 1

あなたは、ページ・リフレッシュの効果を得るためにも、Page_Loadの機能にあなたの条件を記述する必要があります。

$(document).on("pageload",function(){ 
     //add here logic related to get currently selected value from dropdown and make 
    other tags disable as per your requirement 
    }); 

あなたはこれですべての問題に直面した場合、私に教えてください。

Answer 2

ページの読み込み時に、ドロップダウンが変更されたときと同じように、ドロップダウンの値を確認する必要があります。

サーバー側のコードはドロップダウンの選択した値を保持しますが、クライアント側で設定したコントロールの無効な状態は保持されないためです。 Webページは本質的にステートレスであり、明示的に永続化しない変更は、ページがリフレッシュされるときに破棄されます。

jQuery(function() { 
setEnabledDisabled(jQuery('select').val()); //runs at page load 

jQuery('select').change(function() { 
    setEnabledDisabled(jQuery(this).val()); 
}); 

//re-usable function to implement the logic 
function setEnabledDisabled(val); 
    if(val == "A"){ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
      .attr('disabled','disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .removeAttr('disabled'); 
    } else if(val == "R"){ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .attr('disabled','disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .attr('disabled','disabled'); 
    }else{ 
    jQuery(document.getElementById('dataForm:listView:filterId:field10value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field4value1')) 
     .removeAttr('disabled'); 
    jQuery(document.getElementById('dataForm:listView:filterId:field6value1')) 
     .removeAttr('disabled'); 
    } 
} 
}); 

P.S.：

あなたは簡単にこれを行うには、既存のコードを再利用することができます副次的なこととして、jQueryバージョンのアップグレードを強くお勧めします.1.3は書面（2009年リリース）の時点で8歳以上です。それ以来、多くのバグの修正や機能強化、さらに新しいブラウザーや機能のサポートへの変更がありました。 1.12.4は、2016年5月にリリースされた1.xブランチの最新バージョンです。古いバージョンのIEをサポートする必要がなくなった場合は、2.xブランチに移動すると、ダウンロードは少なくなりますが、互換性の問題を導入する。 3.xはいくつかの大きな変化をもたらし、より完全なテストが必要です。

Answer 3

これを行う - Pageloadではすなわち文書の準備、関数run_your_rules（$ val）でのデフォルト

$(document).ready(function(){ 
    var $this = $('select'); 
    var $val=$this.val(); 
    run_your_rules($val); 

    $this.on('change',function(e) { 
     run_your_rules($(this).val()); 
    }); 

    function run_your_rules($val){ 
    if($val==="A"){ 
     console.log("disable A"); 
    }else if($val==="B"){ 
     console.log("disable B"); 
    } 
    } 

})