如何使用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

Answer 1

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) : "";
});

Answer 2

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

Answer 3

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);
        }
    });
});

Answer 4

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);
        }
    });
});

Answer 5

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: