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

问题

All is in the question, I want to disable and enable a rich:calendar on the client side (using a javascript fonction for example).

xhtml elements:

<rich:calendar id="calendar" ... />          
<h:selectBooleanCheckbox id="checkbox" onclick="change('checkbox', 'calendar')" ... />

JS Function :

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) returns an input input#checkbox but jQuery('#'+calendar) returns a table table#calendar.rich-calendar-exterior and not the components to disabled.

How to disable the input and the icon of the rich calendar using JQuery (or javascript) ?

Edit : <rich:calendar id="calendar" /> generates 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>

回答1:

I can't find a solution using only jQuery implmentation, so I choose to bind the checkbox value and the disabled calendar attribute on the same boolean :

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

There is ajax (I do not want to) does anyone have another solution without ajax ? Without other solution, I'll choose this one as the accepted answer...

回答2:

I know this post is very old, but nonetheless I will contribute to it, because I just had the same doubt.

I was able to do it with JQuery. Looking at the generated HTML output I could see that it creates several components. Here's my <rich:calendar>

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

As you can see the id is cal. But it's internal <input>'s id is actually calInputDate, so that's the one that I disabled via JQuery, like this:

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

And just use the same logic to enable it again.

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

It works :-)

来源：https://stackoverflow.com/questions/8012972/how-to-disable-rich-calendar-using-jquery-or-javascript-client-side

标签

javascript

jquery

calendar

richfaces