一切都在问题中,我想在客户端禁用并启用rich:calendar
(例如使用javascript函数)。
xhtml元素:
<rich:calendar id="calendar" ... />
<h:selectBooleanCheckbox id="checkbox" onclick="change('checkbox', 'calendar')" ... />
JS功能:
function change(checkbox, calendar){
if(jQuery('#'+checkbox).is(':checked')){
// Enable calendar
jQuery('#'+calendar).removeAttr('disabled');
}
else{
// Disable calendar
jQuery('#'+calendar).attr('disabled',true);
}
}
jQuery('#'+checkbox)
返回输入input#checkbox
但是jQuery('#'+calendar)
会返回一个表table#calendar.rich-calendar-exterior
而不是要禁用的组件。
如何使用JQuery(或javascript)禁用富日历的输入和图标?
修改:
<rich:calendar id="calendar" />
生成html:
<span id="calendarPopup">
<input type="text" class="rich-calendar-input" id="calendar" name="calendar"
style="vertical-align: middle; width: 130px">
<img alt="" class="rich-calendar-button" id="calendarPopupButton"
style="vertical-align: middle" src="/project/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.iconimages.CalendarIcon/DATB/eAE7fv4Kw6znAA4mA-w_.jsf">
<input type="hidden" autocomplete="off" id="calendarInputCurrentDate" name="calendarInputCurrentDate" style="display: none" value="11/2011">
</span>
答案 0 :(得分:1)
我找不到仅使用jQuery implmentation的解决方案,所以我选择在同一个布尔值上绑定checkbox值和禁用的calendar属性:
<rich:calendar id="calendar" disabled="#{!checkboxValue}" />
<h:selectBooleanCheckbox id="checkbox" value="#{checkboxValue}">
<a4j:support event="onclick" reRender="calendar"></a4j:support>
</h:selectBooleanCheckbox>
有ajax(我不想)是否有人有没有ajax的另一种解决方案?没有其他解决方案,我会选择这个作为公认的答案......
答案 1 :(得分:0)
我知道这篇文章很老,但我会为此做出贡献,因为我有同样的疑问。
我能够用JQuery
做到这一点。查看生成的HTML
输出,我可以看到它创建了几个组件。这是我的<rich:calendar>
<rich:calendar id="cal" value="#{myManagedBean.date}" >
您可以看到ID为cal
。但它的内部<input>
的ID实际上是calInputDate
,因此我通过JQuery
禁用了这个ID,如下所示:
$('#mainForm\\:calInputDate').prop('disabled', true);
只需使用相同的逻辑再次启用它。
$('#mainForm\\:calInputDate').prop('disabled', false);
它有效: - )