Question

我有一个表单，其中某些字段需要被禁用，直到单击一个复选框。对于JSF元素，一切正常。问题在于主要元素。

对于像下拉列表这样的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-event的jQuery：

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

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

似乎通过jquery事件调用日历。在此jquery事件中，您可以看到默认的disabled被设置为true。而且我认为这是问题所在，我不能将那部分设置为假。

Answer 1

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

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

更新：

因此，您希望在单击checkBox时启用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>

Answer 2

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

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

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

使用JavaScript访问PrimeFaces Calendar的已禁用属性

2 个答案: