如何使用primefaces在勾选或不勾选<p:calendar>时更改启用/禁用<p:selectBooleanCheckbox>和<p:inputTextarea>？

<h:head>
    <h:outputStylesheet library="primefaces" name="primefaces.css" />
    <h:outputScript library="primefaces" name="primefaces.js" />
</h:head>

<p:calendar id="calendar" value="#{bean.date}" />
<p:selectBooleanCheckbox id="checkbox" value="#{bean.checkboxValue}" />
<p:inputTextarea id="textarea" value="#{bean.textareaValue}" />

<script type="text/javascript">
    $(document).ready(function() {
        // 监听calendar的勾选状态变化
        $("#formId\\:calendar").change(function() {
            // 获取勾选状态
            var checked = $(this).prop("checked");
            
            // 根据勾选状态启用/禁用checkbox和textarea
            if (checked) {
                $("#formId\\:checkbox").prop("disabled", false);
                $("#formId\\:textarea").prop("disabled", false);
            } else {
                $("#formId\\:checkbox").prop("disabled", true);
                $("#formId\\:textarea").prop("disabled", true);
            }
        });
    });
</script>