如何使用JQuery或javascript禁用富日历(客户端)

How to disable rich calendar using JQuery or javascript (client side)

本文关键字：日历 客户端 何使用 JQuery javascript      更新时间：2023-09-26

我想在客户端禁用和启用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>

我无法找到仅使用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 ?如果没有其他的解决方案，我将选择这个作为公认的答案…

我知道这篇文章很老了，但我还是会继续写下去，因为我也有同样的疑问。

我可以用JQuery做到这一点。查看生成的HTML输出，我可以看到它创建了几个组件。这是我的<rich:calendar> 

<rich:calendar id="cal" value="#{myManagedBean.date}" >

可以看到id是cal。但它的内部<input>的id实际上是calInputDate，所以这是我通过JQuery禁用的，像这样:

$('#mainForm'':calInputDate').prop('disabled', true);

并使用相同的逻辑再次启用它。

$('#mainForm'':calInputDate').prop('disabled', false);

它工作:-)

相关文章：