How to disable/enable JSF input field in JavaScript?

by

You need to toggle it via server side, not via client side. JSF as being a stateful component based MVC framework safeguards this way against tampered/hacked requests wherein the enduser uses client side languages/tools like HTML or JS to manipulate the HTML DOM tree and/or HTTP request parameters in such way that the outcome of JSF’s disabled, readonly or even rendered attribute is altered.

Imagine what would happen if the JSF developer checked an user’s role in such a boolean attribute against the admin role like so disabled="#{not user.hasRole('ADMIN')}" and a hacker manipulated it in such way that it isn’t disabled anymore for non-admin users. That’s exactly why you can only change the mentioned attributes (and the required attribute and all converters, validators, event listeners, etc) via the server side.

You can use <f:ajax> in any ClientBehaviorHolder component to achieve the requirement. You can let JSF generate a HTML <div> via <h:panelGroup layout="block">, which is also a ClientBehaviorHolder:

<h:form>
    <h:panelGroup layout="block">
        Click this div to toggle the input.
        <f:ajax event="click" listener="#{bean.toggle}" render="input" /> 
    </h:panelGroup>
    <h:inputText id="input" ... disabled="#{not bean.enabled}" />
</h:form>

With this @ViewScoped managed bean (@RequestScoped wouldn’t work for reasons mentioned in #5 of commandButton/commandLink/ajax action/listener method not invoked or input value not updated):

@Named
@ViewScoped
public class Bean implements Serializable {

    private boolean enabled;

    public void toggle() {
        enabled = !enabled;
    }

    public boolean isEnabled() {
        return enabled;
    }

}

See also:

Unrelated to the concrete problem, head to the following answers in case you’re actually interested in how to obtain the HTML representation of JSF components via JS/jQuery:

More Related Contents:

  1. How to select JSF components using jQuery?
  2. Manually adding / loading jQuery with PrimeFaces results in Uncaught TypeErrors
  3. How to refer to a JSF component Id in jquery? [duplicate]
  4. jQuery how to find an element based on a data-attribute value?
  5. How do you select a particular option in a SELECT element in jQuery?
  6. $(window).width() not the same as media query
  7. How to get jQuery to wait until an effect is finished?
  8. Adding data attribute to DOM
  9. How can I show and hide elements based on selected option with jQuery?
  10. jQuery exclude elements with certain class in selector
  11. jQuery Scroll to Div
  12. Update select2 data without rebuilding the control
  13. How to stay on current window when the link opens in new tab?
  14. How can I display a tooltip on an HTML “option” tag?
  15. What’s the difference between keyup, keydown, keypress and input events?
  16. Disable future dates in jQuery UI Datepicker
  17. jQuery when each is completed, trigger function
  18. Write Content To New Window with JQuery
  19. JSON: How do I make cross-domain JSON call
  20. finding the type of an element using jQuery
  21. Populate Select box options on click with Javascript/Jquery with Json data
  22. Modify a svg file using jQuery
  23. How do I reset a jquery-chosen select option with jQuery?
  24. Use jQuery to Detect Container Overflow?
  25. bind event only once
  26. How to add jQueryUI library in MVC 5 project?
  27. jQuery resize not working at FireFox, Chrome and Safari
  28. Jquery post and unobtrusive ajax validation not working mvc 4
  29. How do I select an element with special characters in the ID?
  30. Why return this.each(function()) in jQuery plugins?

Leave a Comment