1

我要做的是在值从所有宠物更改时启用品种下拉菜单，并且当用户单击所有宠物时，品种下拉菜单再次被禁用。这是 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');
         }

      });
   });
4

2 回答 2

4

尝试：

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

jsFiddle 示例

于 2013-09-06T16:06:02.830 回答
1

您可以#form_breedDropDown通过disabledHTML 初始设置：

<select name="breedDropDown" id="form_breedDropDown" disabled>
    <option value="select_breed">Select Breed</option>
</select>

然后是 vanilla JS（我知道你想要 jQuery，但由于人们已经提供了这些选项，我想到底是什么......它更快且更有教育意义）：

document.getElementById('form_petsDropDown').addEventListener('change',function() {
    var self = this,
        breed = document.getElementById('form_breedDropDown');

    if(self.value === 'allPets'){
        breed.disabled = true;
    } else {
        breed.disabled = false;
    }
});

或简化一点：

document.getElementById('form_petsDropDown').addEventListener('change',function() {
    document.getElementById('form_breedDropDown').disabled = (this.value === 'allPets');
});

但这仅适用于符合 W3C 的浏览器，因此不适用于较旧的（IE8-）东西。如果你想确保跨浏览器的兼容性，你可以使用 jQuery 选择器来方便：

$('#form_petsDropDown').on('change',function() {
    document.getElementById('form_breedDropDown').disabled = (this.value === 'allPets');
});

该函数的内容仍然可以工作，所以它仍然会快很多。

于 2013-09-06T16:17:13.517 回答