2 Replies Latest reply on May 24, 2012 1:20 PM by jmanko

    jQuery to disabled all SELECT elements with no OPTIONS or only empty-value OPTIONS

    jmanko

      Ok, that subject is a mouth full.  Basically, I want to disable all SELECT elements that have zero OPTIONS elements or OPTION elements where the value is empty. 

       

      For instance, the following two examples would be disabled:

       

      <select>

      </select>

       

      <select>

      <option value=''></option>

      </select>

       

      These would not be disabled:

      <select>

      <option value=''></option>

      <option value='10'>10 Miles</option>

      <option value='20'>20 Miles</option>

      </select>

       

      <select>

      <option value='1'>10 Miles</option>

      </select>

       

      I tried using the following jQuery, but I can't get it to work:

      <rich:jQuery selector="select" query="(':not(:has(option:not([value=])))').attr('disabled', true)" />

       

      I'm not sure if it's a problem with the query or richfaces, either way nothing gets disabled.

        • 1. Re: jQuery to disabled all SELECT elements with no OPTIONS or only empty-value OPTIONS
          jmanko

          ok, I tried the following, too, but it doesn't work.  It seems as though jQuery is not firing.

           

          <rich:jQuery selector="select" query="(':not(:has(option[value!=\"\"]))').attr('disabled', true)" timing="onload"/>

           

          here is the resulting script:

           

          <script type="text/javascript">

          //<![CDATA[

            jQuery(document).ready(function() {

              var selector = "select";

              try {

                  selector = eval("select");

              } catch (e) {}

              jQuery(selector).(':not(:has(option[value!=""]))').attr('disabled', true);

          });

          //]]>

          </script>

           

          Here are the script includes:

           

          <head>

          <title>App</title>

          <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/utils.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/browser_info.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/modalPanel.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/modalPanelBorders.js"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/modalPanel.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/available.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/script/controlUtils.js"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalcss/panel.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalscript/SpinnerScript.js"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalcss/spinner.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.ImageCacheScript"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalscripts/simpleTogglePanel.js"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalcss/simpleTogglePanel.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/events.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/json/json-dom.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/scriptaculous/effects.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/JQuerySpinBtn.js"/>

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/calendar.js"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/calendar.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <link class="component" type="text/css" rel="stylesheet" href="/myapp/faces/a4j/s/3_3_3.Finalcss/separator.xcss/DATB/eAFrvajdHLp8hjQAEgwDtA__"/>

          <script type="text/javascript">

          <script type="text/javascript" src="/myapp/faces/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js"/>

          <link type="text/css" href="/myapp/css/standard-no-sidebars.css" rel="stylesheet"/>

          <link type="text/css" href="/myapp/css/main.css" rel="stylesheet"/>

          <link type="text/css" href="/myapp/css/list.css" rel="stylesheet"/>

          <link type="text/css" href="/myapp/css/adornments.css" rel="stylesheet">

          <script src="/myapp/js/quotemain.js" type="text/javascript"/>

          <script src="/myapp/js/standard.js" type="text/javascript"/>

          <script type="text/javascript" src="/myapp/js/service.js"/>

          <link type="text/css" href="/myapp/css/agoservice.css" rel="stylesheet"/>

          </head>

          • 2. Re: jQuery to disabled all SELECT elements with no OPTIONS or only empty-value OPTIONS
            jmanko

            Does everything look ok?