jquery - 根据值禁用/启用选择

Question

我想要做的是，当“所有宠物”的值发生变化时，启用品种下拉列表，并且当用户单击返回“所有宠物”时，品种下拉列表将再次禁用。这是jsfiddle http://jsfiddle.net/2yWeN/

   <form id="filter" class="filter" action="http://dev/petlist/public/site/index" accept-charset="utf-8" method="post">  
       <select name="petsDropDown" id="form_petsDropDown">
         <option value="allPets">All Pets</option>
         <option value="barnyard">Barnyard</option>
         <option value="bird">Bird</option>
         <option value="cat">Cats</option>
         <option value="dog">Dogs</option>
         <option value="horse">Horse</option>
         <option value="pig">Pigs</option>
         <option value="smallfurry">Smallfurry</option>
      </select>          
      <select name="breedDropDown" id="form_breedDropDown">
         <option value="select_breed">Select Breed</option>
      </select>        
   </form>


   $(function(){
      if($("#form_petsDropDown option:first").attr('selected','selected')){
         $('#form_breedDropDown').prop('disabled', 'disabled');
      }
      $('#form_petsDropDown').change(function() {
         $('#form_breedDropDown').prop('disabled', false);
         if ($('#form_petsDropDown allPets:selected').text() == 'All Pets'){
            console.log('worked');
            $('#form_breedDropDown').attr('disabled', 'disabled');
         }

      });
   });

Answer 1

尝试:

$('#form_petsDropDown').change(function(){
    $('#form_breedDropDown').prop('disabled',($(this).val()=='allPets'));
}).change();

<强> jsFiddle example