CODEWITHSUNDEEP
javascriptjquery
user9224632
user9224632

Reputation:

Disable selected option in other selects

How can I make all chosen options disabled in all three options? Its only working when the first one is selected.

$(".selectClass").change(function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>
<select class="selectClass">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

http://jsfiddle.net/84w50z2v/1/

Upvotes: 1

Views: 60

Answers (2)

Darshan theerth
Darshan theerth

Reputation: 536

For really disabling in all 3 option lists, you need to use this-

var selectedValues = [];
$(".selectClass").change(function () {
    selectedValues.push($(this).val());
    $.each(selectedValues,function(i,el){
        $(".selectClass").not($(this)).find("option[value='" + el + "']").prop("disabled", true);
    });
});

Here's jsfiddle.

Upvotes: 0

messerbill
messerbill

Reputation: 5639

So far i understood you correctly you just need to set disabled to the HTML elements.

your fiddle:

http://jsfiddle.net/84w50z2v/2/

<select class="selectClass">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
</select>
<select class="selectClass">
 <option value="1" disabled>1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
</select>
<select class="selectClass">
 <option value="1" disabled>1</option>
 ...

greetings

Upvotes: 2

Related Questions