如何使用JQuery或javascript禁用豐富日歷（客戶端）

Question

全部都在問題中，我想在客戶端禁用和啟用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>

Answer 1

我找不到僅使用jQuery實現的解決方案，因此我選擇將復選框值和禁用的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的人有另一個解決方案嗎？ 如果沒有其他解決方案，我將選擇這個作為可接受的答案...

Answer 2

我知道這篇文章很老，但是我仍然會為此做貢獻，因為我也有同樣的疑問。

我能夠使用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);

有用 ：-）