使用JavaScript禁用p：selectBooleanCheckbox

Question

How can I disable <p:selectBooleanCheckbox> component using JavaScript?

My goal is to prevent user from changing value of one selectBooleanCheckbox while another is changed during ajax request time (which change values in managed bean).

My simplified code :

<p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
    <p:ajax listener="..." update="..."/>
</p:selectBooleanCheckbox>

<p:selectBooleanCheckbox id="..." value="...">
    <p:ajax listener="..."  update="..." onstart="alert(document.getElementById('j_idt14:locationChoice2_input').disabled);document.getElementById('j_idt14:locationChoice2_input').disabled=true;alert(document.getElementById('j_idt14:locationChoice2_input').disabled)" />
</p:selectBooleanCheckbox>

j_idt14:locationChoice2_input id is the id of my first <p:selectBooleanCheckbox /> component.

alert() functions dsplay false and after true so my component is well disabled.

However, it stays with the same render event if it's disabled.

Is the only way to be changing manually CSS classes to match disabled state ? Can widgetVar help me ?

nb: I want to change immediately the aspect of the component so I don't use the JSF disabled attribute, I have to use JS.

Answer 1

I answer my own question.

I put inside simple panelGrid my 2 selectBooleanCheckbox and apply blockUI on this panelGrid :

<p:blockUI block="panelToBlock" widgetVar="block" />

<h:panelGrid id="panelToBlock">
   <p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
      <p:ajax listener="..." update="..." onstart="block.show()" oncomplete="block.hide()" />
   </p:selectBooleanCheckbox>

   <p:selectBooleanCheckbox id="..." value="...">
      <p:ajax listener="..."  update="..." onstart="block.show()" oncomplete="block.hide()" />
   </p:selectBooleanCheckbox>

</h:panelGrid>

blockUI has a default opacity value to 0.3 but I don't want to see it, I just want to disable my 2 selectBooleanCheckbox so I change the value of the generated id to 0 at runtime with JS :

$(window).load(function() {

   $('#j_idt14\\:j_idt23_blocker').css('opacity', 0);

}

and that's all.

Now when ajax request is made, these 2 checkboxes values can not be changed.

Hope this helps