如何在 JavaScript 中禁用/启用 JSF 输入字段? [英] How to disable/enable JSF input field in JavaScript?

问题描述

我有一个 inputField 或其他一些标签，我想在用户点击它时禁用它.

有些像这样，但我无法在 JSF 中使用它.

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

我将 disabled=true" 添加到我的输入字段，并在 < h:form > 上设置 div 值(在这种情况下所有父标签只有一个)，类似于 j_idt13 和输入字段的 div，所以div"值看起来像 j_idt13:inputID

有人可以帮助我使用 jQuery 解决方案吗?

我想知道它可以在 JSF 中完成，以及如何完成.

解决方案

您需要通过服务器端来切换它，而不是通过客户端.JSF 作为一个基于 MVC 框架的有状态组件，以这种方式防止篡改/黑客请求，其中最终用户使用客户端语言/工具(如 HTML 或 JS)来操作 HTML DOM 树和/或 HTTP 请求参数，从而使 JSF 的结果disabled、readonly 甚至 rendered 属性被改变.

想象一下，如果 JSF 开发人员在这样的布尔属性中对照管理员角色检查用户的角色会发生什么，例如 disabled="#{not user.hasRole('ADMIN')}" 和黑客以这样的方式操纵它，使其不再被非管理员用户禁用.这正是您只能通过服务器端更改上述属性(以及 required 属性和所有转换器、验证器、事件侦听器等)的原因.

您可以在任何ClientBehaviorHolder 组件来实现需求.你可以让 JSF 通过 生成一个 HTML

，它也是一个 ClientBehaviorHolder>:

<h:panelGroup layout="block">单击此 div 可切换输入.<f:ajax event="click" listener="#{bean.toggle}" render="input"/></h:panelGroup><h:inputText id="input" ... disabled="#{not bean.enabled}"/></h:form>

使用此 @ViewScoped 托管 bean(@RequestScoped 由于 commandButton/commandLink/ajax action/listener方法未调用或输入值未更新):

@Named@ViewScoped公共类 Bean 实现了 Serializable {启用私有布尔值；公共无效切换(){启用 = !启用;}公共布尔 isEnabled() {返回已启用；}}

另见:

• 当UI可以从CSS、HTML、JavaScript、jQuery实现时，JSF需要什么?
• 为什么 JSF 将 UI 组件的状态保存在服务器上?

<小时>

与具体问题无关，如果您真的对如何通过 JS/jQuery 获取 JSF 组件的 HTML 表示感兴趣，请前往以下答案:

• 如何使用jQuery选择JSF组件?
• 如何知道 JSF 组件的 id 以便我可以在 Javascript 中使用

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.

解决方案

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

这篇关于如何在 JavaScript 中禁用/启用 JSF 输入字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！