CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
user1510230
user1510230

Reputation: 230

jquery disable item options if a certain value is selected

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 :)

Upvotes: 0

Views: 1395

Answers (4)

user1558223
user1558223

Reputation: 197

here you go

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#menufoo").change(function (){
    if($("#menufoo option:selected").val()=="interestingValue")
        $('.menufooClass2 option').attr('disabled','disabled');
  });
    $("#menufoo2").change(function (){
    if($("#menufoo2 option:selected").val()=="interestingValue2")
        $('.menufooClass option').attr('disabled','disabled');
  });


});
</script>   


   <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>

Upvotes: 0

Ram
Ram

Reputation: 144659

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

Upvotes: 1

Silver Gonzales
Silver Gonzales

Reputation: 734

You can attach an onchange event to both select items and check whether the new select value is equivalent to interestingValue for the first menu and interestingValue2 from the second menu. You can use .prop() to disable this.

You can do something like this:

$("#menufoo").bind("change", function(event){

  $("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));

});

$("#menufoo2").bind("change", function(event){
  $("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I'm not sure I get it, but something like this:

$('[id^=menufoo]').on('change', function() {
    if (this.value.indexOf('interestingValue') != -1 ) {
        $('[id^=menufoo]').not(this).find('option').prop('disabled', true);
    }else{
        $('[id^=menufoo]').find('option').prop('disabled', false);
    }
});​

FIDDLE

Upvotes: 0

Related Questions