SelectOneMenu disable from javascript

SelectOneMenu disable from javascript

本文关键字：javascript from disable SelectOneMenu      更新时间：2023-09-26

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

我可以禁用使用上述代码的输入框，但一个菜单不起作用。

这是我的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>

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>

顺便说一下，变量名称"组合"是错误的。这是一个下拉列表，而不是组合框。组合框是一个可编辑的下拉列表。<p:selectOneMenu>不会呈现可编辑的下拉列表，而只是一个下拉列表。

按照你说的去做，试试这个：

var input = document.getElementById('search');
var combo = document.getElementById('type1');
相关文章：