How to disable/enable JSF input field in JavaScript?

Question

I have an inputField, or some other tag , that I want to be disabled unitl user clicks on it.

Something like this, but I cant get it to work in JSF.

$("div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

I add disabled=true" to my input field, and div value set on < h:form > (all parent tags in this case only one), something like j_idt13 and div of input field, so "div" value looks like j_idt13:inputID

Can someone help me with jQuery solutin?

I wold like to know can it be done in JSF, and how.

Answer 1

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:

• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
• Why JSF saves the state of UI components on server?

---

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:

• How to select JSF components using jQuery?
• How can I know the id of a JSF component so I can use in Javascript