Disable all select options on page with specific value - Javascript

Question

I am trying to disable all options in all select boxes with specific value on page.

If there are 5 select boxes and each have 4 options. Like this:

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

I want to disable all options with value 3 on whole page, how would i achieve this?

$("select option["+previous+"]").attr('disabled', 'disabled');

But this is disabling Select option with selected value 3.

Any help will be appreciated.

@Satpal suggested `$("select option[value="+previous+"]").prop('disabled', true);` — mplungjan, Sep 22 '17 at 14:02
I like this one: `var previous = 3; $('select option') .filter(function(i, e) { return $(e).val() == previous }) .prop('disabled', true);` — mplungjan, Sep 22 '17 at 14:07

score 2 · Accepted Answer · answered Sep 22 '17 at 13:57

2

Looks like whatever you passing treated as a index of inside select. Try value attribute selector

$("select option[value ="+previous+"]").attr('disabled', 'disabled');

answered Sep 22 '17 at 13:57

Suresh Atta

120,458
37
198
307

1

`prop("disabled",true)` – mplungjan Sep 22 '17 at 14:08

score 1 · Answer 2 · answered Sep 22 '17 at 13:57

1

You can do it using value attribute in jquery.

$("select option[value='3']").attr('disabled', 'disabled');

answered Sep 22 '17 at 13:57

Himanshu Upadhyay

6,558
1
20
33

score 1 · Answer 3 · answered Sep 22 '17 at 14:00

Here you go with a solution using ES6 template literal

var previous = 3;
$(`select option[value=${previous}]`).prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Hope this will help you.

ES6 is overkill in my opinion – mplungjan Sep 22 '17 at 14:01 — mplungjan, Sep 22 '17 at 14:01

Disable all select options on page with specific value - Javascript

3 Answers3