CODEWITHSUNDEEP
jqueryhtmlselect
Ajay
Ajay

Reputation: 705

Disable select options based on value *through the HTML only!*

I need to disable a select option based on the value of a variable. The value is similar to one of the select option value and it needs to be disabled.

For ex,

<select>
<option>Value a</option>
<option>Value b</option>
</select>

$variable = <some select option value>;

So if variable is equal to Value a then it needs to be disabled in select option.

Thanks.

Upvotes: 22

Views: 85658

Answers (4)

aziz punjani
aziz punjani

Reputation: 25766

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

Upvotes: 28

Philip
Philip

Reputation: 7166

This should be a faster solution

$('select').children('option[value="' + $variable + '"]').attr('disabled', true)

Upvotes: 10

Joseph Marikle
Joseph Marikle

Reputation: 78520

With your current markup this will work:

$("select option:contains('Value b')").attr("disabled","disabled");

http://jsfiddle.net/CtqC6/

EDIT

http://jsfiddle.net/CtqC6/1/

var variable = "b"
$("select option:contains('Value " + variable + "')").attr("disabled","disabled");
$("select").prop("selectedIndex",-1)

Upvotes: 33

Marko
Marko

Reputation: 72222

Let's say you had the following markup

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Using this jQuery, the saab option would be disabled. 

$("select option").each(function() {
    var $thisOption = $(this);
    var valueToCompare = "saab";

    if($thisOption.val() == valueToCompare) {
        $thisOption.attr("disabled", "disabled");
    }
});

Try it out here

Upvotes: 7

Related Questions