解决方案

Question

在我的网站上我在一个组中有两个单选按钮。一个用于时间范围，一个用于数字输入。对于日期范围，我使用两个p：calender小部件和数字a p：spinner。

现在我想在单击日期范围的单选按钮时禁用p：spinner。我知道这可以在服务器端完成，但我想将一些流量保存到服务器，所以我想在客户端进行此操作。

我的第一个想法是使用jQuery。我知道如何禁用微调器的输入字段，并设置ui-class以使其看起来不可见，但是微调器按钮（向上和向下）仍然是活动的（它们看起来不像那样，但我可以点击它们）

你知道什么是错的吗？

这是我的代码：

XHTML

<p:outputPanel id="customPanel">
    <p:selectOneRadio id="customRadio" layout="custom" value="all">
        <f:selectItem itemLabel="opt1" itemValue="all" />
        <f:selectItem itemLabel="opt2" itemValue="random" />
        <f:selectItem itemLabel="opt3" itemValue="range" />
    </p:selectOneRadio>

    <h:panelGrid columns="3">
        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
        <h:outputLabel for="opt1" value="Alle" />
        <p:outputLabel value="&nbsp;" />

        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
        <h:outputLabel for="opt2" value="Anzahl" />
        <p:spinner placeholder="42" min="1" id="random" disabled="true"/>

        <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
        <h:outputLabel for="opt3" value="Zeitraum" />
        <h:panelGroup id="range">
            <p:calendar placeholder="24.12.2014" locale="de" />
            <p:calendar placeholder="24.12.2014" locale="de" />
        </h:panelGroup>
     </h:panelGrid>
</p:outputPanel>

JS

$(document).ready(function() {
    $("input[name='inputForm:customRadio']").change(radioValueChanged);
});

function radioValueChanged() {
    radioValue = $(this).val();

    if (radioValue == "all") {
        toggleRandomInput(false);
        $("#inputForm\\:range").attr("disabled", "disabled");
    } else if (radioValue == "random") {
        toggleRandomInput(true);
        $("#inputForm\\:range").attr("disabled", "disabled");
    } else if (radioValue == "range") {
        toggleRandomInput(false);
        $("#inputForm\\:range").removeAttr("disabled");
    }
}

function toggleRandomInput(active) {
    if (active) {
        $("#inputForm\\:random").removeClass("ui-state-disabled");
        $("#inputForm\\:random_input").removeAttr("disabled");
    } else {
        $("#inputForm\\:random_input").attr("disabled", "disabled");
        $("#inputForm\\:random").addClass("ui-state-disabled");
    }
}

解决方案

XHTML

...
<h:outputScript library="js" name="simSettings.js" target="body" />
...

<p:selectOneRadio id="rdoGrp_filter" layout="custom" value="#{simulation.filter_selectedFilter}" 
    widgetVar="rdoGrp_filter">
...
<p/selectOneRadio>

<p:radioButton id="rdo_changed" for="rdoGrp_filter" itemIndex="2" />
<h:outputLabel for="rdo_changed" value="#{sim.filter_range}" />

JS

    $(document).ready(function() {
        rdoGrp_filter.jq.change(radioValueChanged);
        toggleRandomInput(false);

        // Exception rdoGrp_filter is not defined is thrown
    });

    function toggleCalendar(active) {
        if (active) {
            cal_from.disable();
            cal_from.jq.removeClass("ui-state-disabled");
            cal_to.disable();
            cal_to.jq.removeClass("ui-state-disabled");
        } else {
            cal_from.enable();
            cal_from.jq.addClass("ui-state-disabled");
            cal_to.enable();
            cal_to.jq.addClass("ui-state-disabled");
        }
    }

    function toggleRandomInput(active) {
        if (active) {
            spin_random.jq.removeClass("ui-state-disabled");
            spin_random.input.removeAttr("disabled", "disabled");
            spin_random.bindEvents();
        } else {
            spin_random.jq.addClass("ui-state-disabled");
            spin_random.input.attr("disabled", "disabled");
            spin_random.upButton.unbind();
            spin_random.downButton.unbind();
        }
    }

Answer 1

这是一个util函数;）

function disableSpinner(spinnerObject) {
    spinnerObject.input.attr('disable', 'disable');
    spinnerObject.jq.addClass("ui-state-disabled");
    spinnerObject.upButton.unbind('mousedown.spinner')
    spinnerObject.downButton.unbind('mousedown.spinner')
}

function enableSpinner(spinnerObject) {
   spinnerObject.input.removeAttr('disable', 'disable');
   spinnerObject.jq.removeClass("ui-state-disabled");
   spinnerObject.bindEvents()
}

<强> XHTML

<p:spinner widgetVar="spinnerWV" placeholder="42" min="1" id="random" />

然后只需在toggleRandomInput函数中

function toggleRandomInput(active) {
   if (active) {
       enableSpinner(PF('spinnerWV'));//assuming that your spinner widgetVar is spinnerWV
   } else {
       disableSpinner(PF('spinnerWV'));//assuming that your spinner widgetVar is spinnerWV
   }
}

希望这有帮助。

Answer 2

继@ hatem-aliman的回答之后，我发现了这些行

spinnerObject.input.attr('disable', 'disable');

和

spinnerObject.input.removeAttr('disable', 'disable');

不再有效。你可以使用

spinnerObject.input.prop("disabled", true);

和

spinnerObject.input.prop("disabled", false);

代替。

禁用Primefaces Spinner Clientside

XHTML

JS

解决方案

XHTML

JS

2 个答案: