Как отключить богатый календарь, используя JQuery или javascript (на стороне клиента) - PullRequest
1 голос
/ 04 ноября 2011

Все в вопросе, я хочу отключить и включить 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>

Ответы [ 2 ]

1 голос
/ 07 ноября 2011

Я не могу найти решение, использующее только имплементацию 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? Без другого решения я выберу это в качестве принятого ответа ...

0 голосов
/ 03 июля 2013

Я знаю, что этот пост очень старый, но, тем не менее, я внесу в него свой вклад, потому что у меня просто были те же сомнения.

Я смог сделать это с JQuery. Глядя на сгенерированный вывод HTML, я увидел, что он создает несколько компонентов. Вот мой <rich:calendar>

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

Как видите, идентификатор cal. Но его внутренний <input> идентификатор на самом деле calInputDate, так что это тот, который я отключил с помощью JQuery, например:

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

И просто используйте ту же логику, чтобы включить ее снова.

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

Работает: -)

...