2 Replies Latest reply: May 24, 2012 1:20 PM by John Manko RSS

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

John Manko Newbie

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
    John Manko Newbie

    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>