How to disable/re-enable JSF component using javascript? [duplicate]

This question already has an answer here: How to disable/enable JSF input field in JavaScript? (1 answer) Closed 3 years ago.

I'm developing a Java EE application (JSF2 + richfaces 3.3.3 + facelets).

I want to disable my h:selectOneMenu when loading my page, and when it finishes loading (using the function onload()), I want to re-enable my component. I have something like this:

<ui:define name=开发者_运维知识库"infosHead">
     <script type="text/javascript">
        window.onload = function() {
          document.getElementById("forme1_myform:valueCh").disabled = false;
          alert("here");
        }
     </script>
</ui:define>
<ui:define name="infosBody">
   <h:form id="forme1_myform" target="_blank">
    <h:selectOneMenu id="valueCh" value="#{mybean.value}" disabled="true" >
      <f:selectItems value="#{mybean.values}" />
         <a4j:support event="onchange"
              ajaxSingle="true"
              limitToList="true"                      
              reRender="id1,id2,...."
              ignoreDupResponses="true"
              action="#{mybean.actionme}"
              oncomplete="getId();"/>
         </h:selectOneMenu>
   </h:form>
</ui:define>

this is working fine. But my bean is getting nothing (mybean.value == null).

It's like he thinks that the component is still disabled.

how can I make this works ?

---

The problem is that you are enabling your component only on the client side. On the server side it will always be disabled="true". To make this work you must :

a. Assign the disabled property of your component to a managed bean property that will be initially 'true'

disabled="#{myController.valueChDisableStatus}"

b. Inside your h:form insert window.onload = callScript

c. Finally, in the myController#someAction method set the valueChDisableStatus property to false

I cant check the solution right now, but I believe it will work fine.

---

I found this solution.

<ui:define name="infosHead">
     <script type="text/javascript">
        window.onload = function() {
          updateName(false); // sets 'disabled' from true to false
        }
     </script>
</ui:define>
<ui:define name="infosBody">
   <h:form id="forme1_myform" target="_blank">
    <h:selectOneMenu id="valueCh" value="#{mybean.value}" disabled="#{mybean.render}" >
      <f:selectItems value="#{mybean.values}" />
         <a4j:support event="onchange"
              ajaxSingle="true"
              limitToList="true"                      
              reRender="id1,id2,...."
              ignoreDupResponses="true"
              action="#{mybean.actionme}"
              oncomplete="getId();"/>
         </h:selectOneMenu>
   </h:form>
    <a4j:form>
        <!-- this is where it's going to reRender my component -->
        <a4j:jsFunction name="updateName" reRender="valueCh">
            <a4j:actionparam name="param1" assignTo="#{mybean.render}"  />
        </a4j:jsFunction>
    </a4j:form>
</ui:define>

and this is the content of mybean:

public class MyBean implements Serializable {

    private List<SelectItem> values;
    private String value;
    private Boolean render = true; // the page loads with element disabled

    public void actionme(){...}
    //getters & setters
}

---

Neither of these solutions worked for me.

While setting the element's disabled attribute from a managed bean value worked fine, and changing it's value via javascript also worked fine, once the form is submitted the "someaction" method is still not reached in order to "set the valueChDisableStatus property to false". In addition I found that even though my managed bean had an isDisabled() and a setDisabled(boolean value), the setDisabled() method was never called after submitting the form (of course), though the isDisabled() was. So I was unable to find a way using these solutions to change the managed beans "disabledElement" value to false.

I did find a solution that did work for me though at this link: http://blog.michaelscepaniak.com/jsf-you-cant-submit-a-disabled-form-element

Basically it suggests that by default all the elements should be "enabled" from the JSF perspective, and that all enabling and disabling should be done via Javascript. It does point out the the client and server states are out of sync temporarily in this solution... but it works very well for my scenario regardless of the temporary mismatch.