SelectOneMenu禁用javascript

Question

我正在使用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>   

Answer 1

JavaScript 对JSF代码一无所知.相反,它知道它生成的HTML输出的一切.通过在浏览器和View Source中右键单击页面来查看生成的HTML输出.如果你仔细观察,你会看到<p:selectOneMenu>它不生成一个<select><option>,而是生成一个<div><ul><li>.disabled仅支持该属性<select>.因此,您没有看到任何效果.

我建议你通过JSF ajax而不是通过JavaScript来禁用它.这是在下拉列表中添加<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>不会呈现可编辑的下拉列表,而只是下拉列表.