JS Remove disabled attribute from select options

Hi

I am looking for a JS solution to remove the disabled="disabled" attribute from options of a specific select field (id of the select see below) in a form.

<select  id="wpv_control_select_region" name="region[]" style="" class="js-wpv-filter-trigger wpcf-form-select form-select select">
<option value="" selected="selected" class="js-wpv-filter-trigger wpcf-form-option form-option option">alle Regionen</option>
<option value="Romandie sud" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Romandie sud</option>
<option value="Romandie nord" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Romandie nord</option>
<option value="Romandie" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Romandie</option>
<option value="Bern / Oberwallis" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Bern / Oberwallis</option>
<option value="Aargau" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Aargau</option>
<option value="Zentralschweiz / Tessin" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Zentralschweiz / Tessin</option>
<option value="Zürich / Thurgau" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Zürich / Thurgau</option>
<option value="Ostschweiz" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Ostschweiz</option>
<option value="Ganze Deutschschweiz" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Ganze Deutschschweiz</option>
<option value="GanzeSchweiz" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">Ganze Schweiz</option>
<option value="International" disabled="disabled" class="js-wpv-filter-trigger wpcf-form-option form-option option">International</option>
</select>

Open in new window



How could this be done?

It should be a function that could be executed when the page finished loading.

Thanks!
netsltAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Javascript way. Put this script anywhere after the select block in your markup.
var opts = document.getElementById('wpv_control_select_region').getElementsByTagName('option');
for (var i = 0; i < opts.length; i++) {
	opts[i].disabled = false;
}

Open in new window

jQuery way.
$(document).ready(function() {
	$('#wpv_control_select_region option').prop('disabled', false);
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
This can be done with the following bit of jQuery
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $('#wpv_control_select_region option').prop('disabled',false);
});
</script>

Open in new window

1
netsltAuthor Commented:
Thank you Tom!

This worked fine, just because the select is part of an ajax filter I had to add the following to enable the options again after each filtering and result pagination...

jQuery( document ).on( 'js_event_wpv_pagination_completed',option_enable  );
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', option_enable );

function option_enable() { jQuery('#wpv_control_select_region option').prop('disabled', false);}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

netsltAuthor Commented:
And thanks to Julian - you also got the solution, but I saw it only now... sorry for that.
0
Tom BeckCommented:
...so, all you really needed from EE was .prop('disabled', false).

Thanks for the points.
0
netsltAuthor Commented:
Yes, that was the missing link ;-)

Sometimes it's better to ask when you don't find the solution yourself after 30min of trying...
0
Tom BeckCommented:
Copy that.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.