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

HTML 経由で初期設定#form_breedDropDownすることができます。disabled

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

そして、バニラ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 に答える