使用 JavaScript 访问 PrimeFaces 日历的禁用属性答案

【问题标题】：Accessing disabled attribute for PrimeFaces Calendar with JavaScript使用 JavaScript 访问 PrimeFaces 日历的禁用属性
【发布时间】：2010-09-27 07:09:06
【问题描述】：

我有一个表单，在单击复选框之前需要禁用某些字段。对于 JSF 元素都工作正常。问题出在 primeface 元素上。

对于像下拉列表这样的 JSF 元素，我这样做：

<h:selectOneMenu value="countryValue" disabled="true" id="countryId">
    <f:selectItems value="countries" />
</h:selectOneMenu>

对于 Primefaces-elements，一个像这样的日历：

<p:calendar disabled="true" id="datePicker" value="dateValue" 
         pattern="yyyy-MM-dd" startWeekday="1"    
            timeZone="GMT">  
</p:calendar>

我用来在事件中启用这些元素的 JavaScript 很简单：

function enableLocationUpdateFilter()
{
    document.getElementById('form:datePicker').disabled = false;
}

调用onchange事件的jQuery：

 jQuery('.countryCheckBoxId').change(function()
 {
    enableCountryFilter();
 });

通过调查 firebug 中的 Primefaces 元素，我可以看到 id“datePicker”仅充当“span”id，而 HTML 输入字段的实际 id 是“datePicker_input”。因此，我尝试使用“datePicker_input”在javascript中使用“datePicker”作为ID。这将启用该字段，但 jQuery 事件调出实际日历不起作用。

日历似乎也是通过 jquery-event 调用的。在这个 jquery-event 中，您可以看到默认禁用设置为 true。我认为这就是问题所在，我不能将那部分设置为 false。

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

我能想到的最好的办法是在服务器上调用 Ajax，然后重新渲染日历。你能告诉我们是什么触发了这个 jQuery-onchange 事件吗？

我假设您使用的是 JSF 2.0，对吧？

更新：

所以你想在单击复选框时启用p:calendar。类似的东西应该可以工作：

<h:selectBooleanCheckbox id="countryCheckBoxId" value="#{bean.countryBoolean}">
   <f:ajax render="datePicker"/>
</h:selectBooleanCheckbox>

<p:calendar disabled="#{!bean.countryBoolean}" id="datePicker" value="dateValue" 
        pattern="yyyy-MM-dd" startWeekday="1" timeZone="GMT">     
</p:calendar>

【讨论】：

添加了更多信息。关于我编辑的最后信息（在帖子的底部），感觉就像重新渲染是一种选择。但是，如果它可以与 JSF 元素一起使用，那就更好了。
感谢您的意见！虽然我刚刚尝试了其他解决方案，但我会编辑我的问题。

【解决方案2】：

由于在您按下文本字段时会调用日历，因此我尝试了以下操作：

-将日历禁用变量设置为 false。
- 将日历的输入文本字段禁用属性设置为 true。
- 更改时，将文本字段禁用属性设置为 false。

通过这种方式，日历的 disabled 属性始终设置为 false（意味着它永远不会被禁用），并且我只在渲染时在 javaScript 代码中将文本字段设置为禁用。通过这种方式，您无法触发日历，并且禁用仅适用于文本字段，并且在更改时我再次启用文本字段。

【讨论】：