title: Disable Primefaces Spinner Clientside
body: <p>on my Website I have two radio buttons in a Group. One for a time range and one for a number input. For the date range, I use two p:calender widgets and for the number a p:spinner. </p>
  
  <p>Now I want to disable the p:spinner if the radio button for the date range was clicked. I know that this can be done serverside, but I want to save some traffic to the server, so I want to to this on the client side.</p>
  
  <p>My first idea was to use jQuery. I know how to disable the input field of the spinner, and set the ui-class so that it looks like it is invisible, but the spinner buttons (up and down) are still active (they don't look like that, but i can click on them)</p>
  
  <p>Do you have any idea what's wrong?</p>
  
  <p>Here's my code:</p>
  
  <h3>xhtml</h3>
  
  <pre><code>&lt;p:outputPanel id="customPanel"&gt;
      &lt;p:selectOneRadio id="customRadio" layout="custom" value="all"&gt;
          &lt;f:selectItem itemLabel="opt1" itemValue="all" /&gt;
          &lt;f:selectItem itemLabel="opt2" itemValue="random" /&gt;
          &lt;f:selectItem itemLabel="opt3" itemValue="range" /&gt;
      &lt;/p:selectOneRadio&gt;
  
      &lt;h:panelGrid columns="3"&gt;
          &lt;p:radioButton id="opt1" for="customRadio" itemIndex="0" /&gt;
          &lt;h:outputLabel for="opt1" value="Alle" /&gt;
          &lt;p:outputLabel value="&amp;nbsp;" /&gt;
  
          &lt;p:radioButton id="opt2" for="customRadio" itemIndex="1" /&gt;
          &lt;h:outputLabel for="opt2" value="Anzahl" /&gt;
          &lt;p:spinner placeholder="42" min="1" id="random" disabled="true"/&gt;
  
          &lt;p:radioButton id="opt3" for="customRadio" itemIndex="2" /&gt;
          &lt;h:outputLabel for="opt3" value="Zeitraum" /&gt;
          &lt;h:panelGroup id="range"&gt;
              &lt;p:calendar placeholder="24.12.2014" locale="de" /&gt;
              &lt;p:calendar placeholder="24.12.2014" locale="de" /&gt;
          &lt;/h:panelGroup&gt;
       &lt;/h:panelGrid&gt;
  &lt;/p:outputPanel&gt;
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>$(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");
      }
  }
  </code></pre>
  
  <hr>
  
  <h1>Solution</h1>
  
  <h3>xhtml</h3>
  
  <pre><code>...
  &lt;h:outputScript library="js" name="simSettings.js" target="body" /&gt;
  ...
  
  &lt;p:selectOneRadio id="rdoGrp_filter" layout="custom" value="#{simulation.filter_selectedFilter}" 
      widgetVar="rdoGrp_filter"&gt;
  ...
  &lt;p/selectOneRadio&gt;
  
  &lt;p:radioButton id="rdo_changed" for="rdoGrp_filter" itemIndex="2" /&gt;
  &lt;h:outputLabel for="rdo_changed" value="#{sim.filter_range}" /&gt;
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>    $(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();
          }
      }
  </code></pre>