0

私はJSF-primefaceとjavascriptを使用しています。

これがjavascriptのコードです。

<script>
var $element = $("select['se:type5'] option:selected").val();

alert($element);

var input = document.getElementById('se:search');
var combo = document.getElementById('se:type1');

if($element == 1)
{
    input.disabled = false; 
    combo.disabled = true;
}
else if($element == 2)
{
    input.disabled = true; 
    combo.disabled = false;
}
</script>

上記のコードを使用して入力ボックスを無効にすることはできますが、onemenuは効果がありません。

これが私のJSFコードです

      <p:selectOneMenu id="type5"  effect="fold" onchange="disabled();" 
                               required="true" 
                               label="Type5"  styleClass="select-option" style="border:1px solid #b5b5b5; padding-left:5px; margin-top:5px;width:298px;height:25px;" >

        <f:selectItem itemLabel="Search By Skill" itemValue="1" />  
        <f:selectItem itemLabel="Search By Location" itemValue="2" />  



              </p:selectOneMenu> 
       <p:inputText value="#{user.latitude}" id="latitude" style="visibility: hidden" />
  <h:panelGrid columns="4">







      <p:inputText id="search" styleClass="inner-page-input-type"

         onfocus="if(this.value=='Job title, Skills, Company, etc.') this.value='';" 
 onblur="if(this.value=='') this.value='Job title, Skills, Company, etc.';" type="text"  
 value="#{user.skill}"   >  

        </p:inputText>  


      <p:selectOneMenu id="type1" value="#{user.geoLocationLatitude}" effect="fold" 
                               required="true" 
                               label="Type1"  styleClass="select-option" style="border:1px solid #b5b5b5; padding-left:5px; margin-top:5px;width:298px;height:25px;" >

        <f:selectItem itemLabel="---km---" itemValue="1" />  
        <f:selectItem itemLabel="Under 150km" itemValue="150" />  
        <f:selectItem itemLabel="Between 150km - 300km" itemValue="300" />  
        <f:selectItem itemLabel="Between 300km - 450km" itemValue="450" />  
        <f:selectItem itemLabel="Between 450km - 600km" itemValue="599" /> 
        <f:selectItem itemLabel="Above 600km" itemValue="600" /> 

              </p:selectOneMenu>  


 </h:form>
4

2 に答える 2

5

JavaScriptはJSFコードについて何も知りません。代わりに、生成されたHTML出力についてすべてを知っています。ブラウザのページを右クリックしてソースを表示することにより、生成されたHTML出力を確認します。よく見ると、<p:selectOneMenu>はを生成せず<select><option>、代わりにを生成することがわかります<div><ul><li>。このdisabled属性はでのみサポートされ<select>ます。したがって、効果は見られません。

JavaScriptではなくJSFajaxを使用して無効にすることをお勧めします。<f:ajax>ドロップダウン内にまたはを追加し、<p:ajax>更新する必要のあるコンポーネントのIDを指定するだけdisabledで、現在選択されている項目に基づいてチェックが実行されます。JavaScriptの定型文はもう必要ありません。このようにして、サーバー側の検証の堅牢性も活用できます。

<p:selectOneMenu binding="#{searchType}" ...>
    <f:selectItem itemLabel="Search By Skill" itemValue="1" />  
    <f:selectItem itemLabel="Search By Location" itemValue="2" />  
    <p:ajax update="search type1" />
</p:selectOneMenu> 

<p:inputText id="search" ... disabled="#{searchType.value == 2}" />  

<p:selectOneMenu id="type1" ... disabled="#{searchType.value == 1}">
    ...
</p:selectOneMenu>

ちなみに、変数名「combo」は間違っています。これはドロップダウンであり、コンボボックスではありません。コンボボックスは編集可能なドロップダウンです。は<p:selectOneMenu>編集可能なドロップダウンをレンダリングしませんが、単なるドロップダウンをレンダリングします。

于 2012-06-01T12:16:15.343 に答える
-1

あなたが言ったことを続けて、代わりにこれを試してください：

var input = document.getElementById('search');
var combo = document.getElementById('type1');
于 2012-06-01T19:16:07.160 に答える