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

Answer 2

您最初可以通过HTML将#form_breedDropDown设置为disabled：

<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');
});

该功能的内容仍然可以使用，所以它的速度会快得多。

根据值禁用/启用选择

2 个答案: