如何使用 JQuery 或 javascript（客户端）禁用富日历答案

【问题标题】：How to disable rich calendar using JQuery or javascript (client side)如何使用 JQuery 或 javascript（客户端）禁用富日历
【发布时间】：2011-12-22 05:09:25
【问题描述】：

一切都在问题中，我想在客户端禁用和启用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>

【问题讨论】：

如果您可以将传递给浏览器的 HTML 发布（通过查看源代码），那么不熟悉 Richfaces 的人也可以为您提供帮助。
@JamesMontagne 你可以看到我的编辑和我的回答。我的答案并不完全是预期的实现，所以我仍在寻找一个好的答案。谢谢

标签： javascript jquery calendar richfaces

【解决方案1】：

我知道这篇文章已经很老了，但我还是会为它做出贡献，因为我也有同样的疑问。

我可以通过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);

它有效:-)

【讨论】：

这不会禁用日历按钮，而只会禁用输入字段

【解决方案2】：

我找不到仅使用 jQuery 实现的解决方案，因此我选择将复选框值和禁用的日历属性绑定在同一个布尔值上：

<rich:calendar id="calendar" disabled="#{!checkboxValue}" />          
<h:selectBooleanCheckbox id="checkbox" value="#{checkboxValue}">
   <a4j:support event="onclick" reRender="calendar"></a4j:support>
</h:selectBooleanCheckbox>

有 ajax（我不想）有没有人有没有 ajax 的另一种解决方案？如果没有其他解决方案，我会选择这个作为接受的答案...

【讨论】：