Как я могу изменить группу p: selectBooleanCheckboxes с тем же классом, используя jQuery?

Question

У меня есть PrimeFaces p:selectBooleanCheckbox:

<p:selectBooleanCheckbox styleClass="myCLass" onchange="callsMethod();" value="true" />

Я хочу что-то вроде этого: $('.myCLass').prop( 'checked', true ) для динамического задания значения p:selectBooleanCheckbox.

Answer 1

Вы можете использовать метод PrimeFaces.getWidgetById, чтобы получить виджет Primefaces для каждого флажка, которому назначен ваш styleClass:

Переключить все флажки, имеющие styleClass="myCLass":

$('.myCLass').each(function(){PrimeFaces.getWidgetById(this.id).toggle()});

Установите все флажкиимеющий styleClass="myCLass":

$('.myCLass').each(function(){PrimeFaces.getWidgetById(this.id).check()});

Снимите все флажки, имеющие styleClass="myCLass":

$('.myCLass').each(function(){PrimeFaces.getWidgetById(this.id).uncheck()});

Answer 2

Это намного проще, чем с помощью widgetVar.

1. Добавьте widgetVar к вашему компоненту, например ...

<p:selectBooleanCheckbox widgetVar="wgtMyCheckBox" onchange="callsMethod();"  />

В вашем коде Javascript используйте WidgetVar для получения или установки значения.

    PF('wgtMyCheckBox').isChecked(); -- returns current state
    PF('wgtMyCheckBox').check(); -- checks the box
    PF('wgtMyCheckBox').uncheck(); -- unchecks the box
    PF('wgtMyCheckBox').toggle(); -- toggles the current state to the opposite state

Если вы хотите установить все флажки на экране, вы можете циклически перебирать виджеты.

for (var widgetVar in PrimeFaces.widgets) {
   var widget = PrimeFaces.widgets[widgetVar];
   if (widget && widget instanceof PrimeFaces.widget.SelectBooleanCheckbox) { 
       widget.check();
   }
}