CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
lewis4u
lewis4u

Reputation: 15067

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

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

Upvotes: 3

Views: 6355

Answers (5)

Mohammad
Mohammad

Reputation: 21499

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

Upvotes: 4

lewis4u
lewis4u

Reputation: 15067

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:

enter image description here

Upvotes: 0

Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

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

Upvotes: 2

Chris
Chris

Reputation: 997

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

Upvotes: 1

S&#233;bastien Demoustiez
S&#233;bastien Demoustiez

Reputation: 1426

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

Upvotes: 1

Related Questions