禁用/啓用選擇

Question

我有兩個ul列表，並在每個列表中有兩個選擇框。我需要使第一個選擇框禁用並啓用第二個選擇框。當選擇第一個選項時，應該禁用選擇，否則啓用。第二個列表也是如此。 這是我的html：

<ul> 
    <li> 
    <div class="select-country"> 
     <select class="units" id="country"> 
     <option value="Metres">Metres</option> 
     <optgroup label="Evropa"> 
      <option value="Feet">Feet</option> 
      <option value="Fathoms">Fathoms</option> 
     </optgroup> 
     <optgroup label="Afrika"> 
      <option value="Feet">Feet</option> 
     </optgroup> 
     <optgroup label="Azija"> 
      <option value="Feet">Feet</option> 
     </optgroup> 
     <optgroup label="Severna Amerika"> 
      <option value="Feet">Feet</option> 
     </optgroup> 
     </select> 
    </div> 
    </li> 
    <li style="visibility: visible;"> 
    <label>Destinacija:</label> 
    <div class="select-country"> 
     <select class="units" id="destination"> 
     <option value="Metres">Metres</option> 
     <option value="Feet">Feet</option> 
     <option value="Fathoms">Fathoms</option> 
     <option value="Feet">Feet</option> 
     <option value="Feet">Feet</option> 
     <option value="Feet">Feet</option> 
     </select> 
    </div> 
    </li> 
</ul> 

，這是腳本：

$(document).ready(function() { 
    $('#destination').prop('disabled','disabled').css('opacity','0.5');   
    $('#country').on('change',function(){ 
    var choice = $(this).val(); 
    if(choice == "Metres"){       
     console.log($('#destination').prop('disabled','disabled').css('opacity','0.5')); 
    }else{ 
     $('#destination').prop('disabled',false).css('opacity','1'); 
    } 
    }); 
}); 

代碼工作有兩個選擇框，但我想一個腳本，無論對於名單的作品...我把只有一個在這個問題列表中，但第二個是相同的。

Answer 1

給一個共同的類，並使用this有：

$(document).ready(function() { 
 
    $('.desti-select').prop('disabled','disabled').css('opacity','0.5');   
 
    $('.country-select').on('change',function(){ 
 
    var choice = $(this).val(); 
 
    if(choice == "Metres"){       
 
     $(this).closest("ul").find('.desti-select').prop('disabled','disabled').css('opacity','0.5'); 
 
    }else{ 
 
     $(this).closest("ul").find('.desti-select').prop('disabled',false).css('opacity','1'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="select-country"> 
 
     <select class="units country-select" id="country-1"> 
 
     <option value="Metres">Metres</option> 
 
     <optgroup label="Evropa"> 
 
      <option value="Feet">Feet</option> 
 
      <option value="Fathoms">Fathoms</option> 
 
     </optgroup> 
 
     <optgroup label="Afrika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Azija"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Severna Amerika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     </select> 
 
    </div> 
 
    </li> 
 
    <li style="visibility: visible;"> 
 
    <label>Destinacija:</label> 
 
    <div class="select-country"> 
 
     <select class="units desti-select" id="destination-1"> 
 
     <option value="Metres">Metres</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Fathoms">Fathoms</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     </select> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <div class="select-country"> 
 
     <select class="units country-select" id="country-2"> 
 
     <option value="Metres">Metres</option> 
 
     <optgroup label="Evropa"> 
 
      <option value="Feet">Feet</option> 
 
      <option value="Fathoms">Fathoms</option> 
 
     </optgroup> 
 
     <optgroup label="Afrika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Azija"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Severna Amerika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     </select> 
 
    </div> 
 
    </li> 
 
    <li style="visibility: visible;"> 
 
    <label>Destinacija:</label> 
 
    <div class="select-country"> 
 
     <select class="units desti-select" id="destination-2"> 
 
     <option value="Metres">Metres</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Fathoms">Fathoms</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     </select> 
 
    </div> 
 
    </li> 
 
</ul>

或者，您也可以使用HTML5 data-*屬性來做到這一點。

$(document).ready(function() { 
 
    $('.desti-select').prop('disabled','disabled').css('opacity','0.5');   
 
    $('.country-select').on('change',function(){ 
 
    var choice = $(this).val(); 
 
    if(choice == "Metres"){       
 
     $($(this).data('desti')).prop('disabled','disabled').css('opacity','0.5'); 
 
    }else{ 
 
     $($(this).data('desti')).prop('disabled',false).css('opacity','1'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <div class="select-country"> 
 
     <select class="units country-select" id="country-1" data-desti="#destination-1"> 
 
     <option value="Metres">Metres</option> 
 
     <optgroup label="Evropa"> 
 
      <option value="Feet">Feet</option> 
 
      <option value="Fathoms">Fathoms</option> 
 
     </optgroup> 
 
     <optgroup label="Afrika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Azija"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Severna Amerika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     </select> 
 
    </div> 
 
    </li> 
 
    <li style="visibility: visible;"> 
 
    <label>Destinacija:</label> 
 
    <div class="select-country"> 
 
     <select class="units desti-select" id="destination-1"> 
 
     <option value="Metres">Metres</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Fathoms">Fathoms</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     </select> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <div class="select-country"> 
 
     <select class="units country-select" id="country-2" data-desti="#destination-2"> 
 
     <option value="Metres">Metres</option> 
 
     <optgroup label="Evropa"> 
 
      <option value="Feet">Feet</option> 
 
      <option value="Fathoms">Fathoms</option> 
 
     </optgroup> 
 
     <optgroup label="Afrika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Azija"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     <optgroup label="Severna Amerika"> 
 
      <option value="Feet">Feet</option> 
 
     </optgroup> 
 
     </select> 
 
    </div> 
 
    </li> 
 
    <li style="visibility: visible;"> 
 
    <label>Destinacija:</label> 
 
    <div class="select-country"> 
 
     <select class="units desti-select" id="destination-2"> 
 
     <option value="Metres">Metres</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Fathoms">Fathoms</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     <option value="Feet">Feet</option> 
 
     </select> 
 
    </div> 
 
    </li> 
 
</ul>