Question

I’m stuck with a jquery problem .. I actually want to disable all the (from all other items except the parent one) if the selected value is “interestingValue”

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

ex : if we select “interestingValue” from the first menu we get

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue">bar foo</option>
      <option value="foo1">foo abc1</option>
      <option value="bar1">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2" disabled="disabled">bar foo2</option>
      <option value="foo2" disabled="disabled">foo abc2</option>
      <option value="bar2" disabled="disabled">foo abc2</option>
    </select>

ex : if we select “interestingValue2” from the second menu we get

    <select name="menufoo" id="menufoo" class="menufooClass">
      <option value="interestingValue" disabled="disabled">bar foo</option>
      <option value="foo1" disabled="disabled">foo abc1</option>
      <option value="bar1" disabled="disabled">foo abc1</option>
    </select>

    <select name="menufoo2" id="menufoo2" class="menufooClass2">
      <option value="interestingValue2">bar foo2</option>
      <option value="foo2">foo abc2</option>
      <option value="bar2">foo abc2</option>
    </select>

thanks 🙂

Answer 1

If your select tags are siblings you can try:

$('select').change(function(){
  if (this.selectedIndex == 0) {
     $(this).siblings('select').find('option').prop('disabled', true)
  }
})

DEMO