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输出的一切。通过在浏览器中右键单击页面和查看源来查看生成的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>不会呈现可编辑的下拉列表，只会显示下拉列表。

Answer 2

继续你说的话，试试这个：

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

SelectOneMenu禁用javascript

2 个答案: