CODEWITHSUNDEEP
javascripthtmlcss
brandudno
brandudno

Reputation: 11

Need to hide Options with disabled attribute

I know this is a longshot however, I need to be able to hide options that are disabled based on the code below, for example option 2 has an attribute of disabled, I don't want this option to be displayed - 

<select id="pa_machine-model" name="attribute_pa_machine-model">
        <option value="">Choose an option…</option>
        <option value="bestech-40" disabled="disabled">Bestech 40</option><option value="52">52</option>
</select>

I've managed this in Firefox with CSS but in chrome they still appear but are greyed out, each variable has a lot of options so it would be better if they only showed dependant on the select box above. Is there a way to do with JavaScript/jQuery?

Thanks!

Upvotes: 0

Views: 531

Answers (4)

Turnip
Turnip

Reputation: 36642

I dont think you can do this cross browser with CSS alone. I have had the same problem in the past.

One way to work around this is to wrap the disabled option in a span (using JQuery) and hide that:

$('option[disabled=disabled]').wrap('<span class="disabled" />');

.disabled {
    display: none;
}

Demo

EDIT:

In light of comments below, since you probably don't want to start hacking wordpress plugins try this:

Every time a select is changed; run the script:

$('select').on('change',function() {
    $('option[disabled=disabled]').wrap('<span class="disabled" />');
});

Upvotes: 1

Abdul
Abdul

Reputation: 159

 <select id="pa_machine-model" name="attribute_pa_machine-model">
            <option value="">Choose an option</option>
            <option value="bestech-40" class="hide">Bestech 40</option>
        <option value="52">52</option>
    </select>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script >

    $( ".hide" ).hide();
    </script>

Upvotes: 0

jme11
jme11

Reputation: 17374

Interesting... I just tried using jQuery .hide() method and that doesn't do anything either, even though it does show that the inline style is there: enter image description here

You could remove the node entirely with: $('option:disabled').remove();

Upvotes: 0

j08691
j08691

Reputation: 207901

Use CSS:

option[disabled=disabled] {
    display:none;
}

jsFiddle example

Upvotes: 1

Related Questions