jquery on change機能

Question

私はxhtmlページにヘッダとディテールpart.theヘッダが含まれています。ディテールには、選択したフィルタに従ってdbからのデータフェッチが含まれています。 私の要件は、私のフィルタは、2つの値をドロップダウンを "A"と "B"と仮定しているので、私はいくつかの他のドロップダウンを無効にしたい選択に応じて。

私は、コードスニペットの下に追加しました： -

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

これが初めて正常に動作します。しかし、データを取得するためにapplyをクリックすると、次に動作しません。

助けてください！

Answer 1

完全なjQueryソリューションが必要な場合は、次のようになります。

実施例：https://jsfiddle.net/Twisty/hfqc4cz5/

HTML

<div class="ui-widget"> 
    <select> 
    <option></option> 
    <option>A</option> 
    <option>R</option> 
    </select> 
</div> 
<div class="ui-widget"> 
    <input id="dataForm:listView:filterId:field10value1" /> 
    <input id="dataForm:listView:filterId:field4value1" /> 
    <input id="dataForm:listView:filterId:field6value1" /> 
</div> 

はJavaScripthttps://api.jquery.com/category/selectors/から

$(function() { 
    $('select').change(function() { 
    var selected = $(this).val(); 
    var field10 = $('#dataForm\\:listView\\:filterId\\:field10value1'), 
     field04 = $('#dataForm\\:listView\\:filterId\\:field4value1'), 
     field06 = $('#dataForm\\:listView\\:filterId\\:field6value1'); 
    switch (selected) { 
     case "A": 
     console.log("A Selected."); 
     field10.prop("disabled", true); 
     field04.prop("disabled", false); 
     field06.prop("disabled", false); 
     break; 
     case "R": 
     console.log("R Selected."); 
     field10.prop("disabled", false); 
     field04.prop("disabled", true); 
     field06.prop("disabled", true); 
     break; 
     default: 
     console.log("'' Selected."); 
     field10.prop("disabled", false); 
     field04.prop("disabled", false); 
     field06.prop("disabled", false); 
    } 
    }); 
}); 

：

名前のリテラル部分としてメタ文字（!"#$%&'()*+,./:;<=>?@[\]^{|}~など）を使用するには、2つのバックスラッシュ（\\）を使用してエスケープする必要があります。たとえば、id = "foo.bar"の要素は、セレクタ$("#foo\\.bar")を使用できます。

また、switch()構造も使用しました。それは私が将来的にそれを成長させることができるように同じことをしますが、私はそれがより好きです。

また、jQueryセレクタと生のJavaScriptメソッドを使用しています。私はまた、使いやすさのためにjQueryオブジェクトを独自の変数にプッシュしました。