Отключить/включить выбор

Question

У меня есть два списка ультов и в каждом списке два поля выбора. Мне нужно сделать первый флажок select box и включить второй флажок select. Когда выбрана первая опция, второй выбор должен быть отключен, а другой - включен. То же самое касается второго списка. это мой 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>