How to disable non selected options in select boxes using jQuery?

Question

I have a model in Laravel that can be edited with dynamic form but i want to prevent changing the selected option in select box so when i open the edit page i should be able to see the select boxes with selected items but all other options should be disabled.

Maybe i could just select all select with jQuery and disable all non selected values?? How to do that?

I have tried this:

// disable non selected items $('select').each(function(){ $('option').each(function() { if(this.selected) { this.attr('disabled', true); } }); });

But it doesn't work, i just need a little help

this is the select box and all others are the same:

<select name="car"> <option selected="selected" value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4">Audi</option> </select>

just other values selected

Provide your drop down with values

Muthu17
– Muthu17

2017-03-01 12:57:39 +00:00
Commented Mar 1, 2017 at 12:57 — Muthu17
– Muthu17, Commented Mar 1, 2017 at 12:57

marc_s · Accepted Answer · 2017-03-22 09:56:51Z

Your code has two problems.

First: you should check if option isn't selected (!this.selected) then disable it.

Second: this.attr('disabled', true) doesn't work in jQuery. You should use $(this) instead.

$('select').each(function(){ $('option').each(function() { if(!this.selected) { $(this).attr('disabled', true); } }); });

$('select').each(function(){ $('option').each(function() { if(!this.selected) { $(this).attr('disabled', true); } }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="car"> <option selected="selected" value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4">Audi</option> </select>

Note that first .each() loop in you code is additional. The bottom code is enough.

$('option').each(function() { !this.selected ? $(this).attr('disabled', true) : ""; });

hmmm this last part of your answer is the best...but i have a problem now. i have one select box that should not be touched....so i have put a class .cars can you please update your answer to check only the options from .cars

Ghanshyam Singh · Accepted Answer · 2017-03-01 13:14:36Z

 $(function(){ var Obj=$('select').find('option'); $.each(Obj,function(){ $(this).is(":selected") ? "" :$(this).attr('disabled',true); }); });

Sébastien Demoustiez · Accepted Answer · 2017-03-01 13:09:25Z

You can replace "this" by "$(this)" and add "!" in the if and it can work:

$('select').each(function(){ $('option').each(function() { if(!$(this).selected) { $(this).attr('disabled', true); } }); });

Chris · Accepted Answer · 2017-03-01 13:10:50Z

Ok I am not really sure what you want to do, but I can fix your first code snippet for you:

// disable non selected items $('select').each(function(){ $('option').each(function() { if(!this.selected) { $(this).parent().attr('disabled', true); } }); });

lewis4u · Accepted Answer · 2017-03-01 14:04:09Z

This is just an update for others:

I have found (for me even better solution) https://silviomoreto.github.io/bootstrap-select/examples/#disabled-select-box

with this plugin you can set the select box to disabled and then you can see what was previously selected and you can't change it.

Just load the plugin in your view and add class .selectpicker and set the select box to disabled and it looks like this:

maybe for others it wont be a break deal but in my situation i already use that selectpicker and i just needed to put the class in my select box
Actually this doesn't work as i need it to....for some reason this doesn't get sent with request

Collectives™ on Stack Overflow

How to disable non selected options in select boxes using jQuery?

5 Answers 5

2 Comments

Comments

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

2 Comments

Related