Primefaces blockUI 不适用于 selectOneRadio？答案

【问题标题】：Primefaces blockUI does not work with selectOneRadio?Primefaces blockUI 不适用于 selectOneRadio？
【发布时间】：2023-04-01 12:44:01
【问题描述】：

当我单击Yes 时，fieldset 被阻止。
但是，当我点击No 时，为什么fieldset 没有被阻止？我错过了什么？

<h:form id="blockUITest">
    <p:selectOneRadio style="width:130px;" onchange="blockUI(this.value);">
        <f:selectItem itemLabel="Yes" itemValue="true" />  
        <f:selectItem itemLabel="No" itemValue="false" />
    </p:selectOneRadio>
    <script type="text/javascript">
        function blockUI(block) {
            if(block) {
                dataEntryBlockUI.show();
            } else {
                dataEntryBlockUI.hide();
            }
        }
    </script>
    <p:blockUI block="dataEntry" widgetVar="dataEntryBlockUI"/>
    <p:fieldset legend="Data Entry" id="dataEntry">
    </p:fieldset>               
</h:form>

【问题讨论】：

标签： jsf primefaces

【解决方案1】：

itemValue 是字符串，它不是一个实际的布尔值，所以如果你在 if 条件下使用它，它总是为 true，因为 true 和 false 都是非空字符串。试试这个：

<h:form id="blockUITest">
    <p:selectOneRadio style="width:130px;" onchange="blockUI(this.value);">
        <f:selectItem itemLabel="Yes" itemValue="true" />  
        <f:selectItem itemLabel="No" itemValue="false" />
    </p:selectOneRadio>
    <script type="text/javascript">
        function blockUI(block) {
            if(block==='true') {
                dataEntryBlockUI.show();
            } else {
                dataEntryBlockUI.hide();
            }
        }
    </script>
    <p:blockUI block="dataEntry" widgetVar="dataEntryBlockUI"/>
    <p:fieldset legend="Data Entry" id="dataEntry">
    </p:fieldset>               
</h:form>

还有另一种使用 hide() 和 show() 函数的方法。您可以使用 jQuery 选择 blockUI 元素，然后调用这些函数。但首先你必须找到blockUI元素的实际id。

$('#actualID').hide()

【讨论】：

【解决方案2】：

我得到一个解决方案，javascript 通过id 检索p:selectOneRadio 的元素。之后检查选择了哪个收音机。这对我有用。

    <h:form id="blockUITest">
        <p:selectOneRadio style="width:130px;" onchange="blockUI();" id="xxx">
            <f:selectItem itemLabel="Yes" itemValue="true" />  
            <f:selectItem itemLabel="No" itemValue="false" />
        </p:selectOneRadio>
        <script type="text/javascript">
            function blockUI() {
                var element1 = document.getElementById('blockUITest:xxx:0');
                if(element1.checked) {
                    dataEntryBlockUI.show();
                }
                var element2 = document.getElementById('blockUITest:xxx:1');
                if(element2.checked){
                    dataEntryBlockUI.hide();
                }
            }
        </script>
        <p:blockUI block="dataEntry" widgetVar="dataEntryBlockUI"/>
        <p:fieldset legend="Data Entry" id="dataEntry">
        </p:fieldset>               
    </h:form>

【讨论】：